> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-91561e57.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Freestyle Setup

<img src="https://mintcdn.com/velt-mintlify-91561e57/TSAG_5m0lX2zHvPn/gifs/Add-Freestyle-Comment.gif?s=1f4a04e20535c952fa896c94a0c462c0" alt="" width="1280" height="720" data-path="gifs/Add-Freestyle-Comment.gif" />

<Tabs>
  <Tab title="React / Next.js">
    <Steps titleSize="h2">
      <Step title="Import Comment components">
        Import the `VeltComments` component and the `VeltCommentTool` component.

        ```js theme={null}
        import {
          VeltProvider,
          VeltComments,
          VeltCommentTool
        } from '@veltdev/react';
        ```
      </Step>

      <Step title="Add Comments component">
        Add the `VeltComments` component to the root of your app.

        This component is required to render comments in your app.

        ```js theme={null}
        <VeltProvider apiKey="API_KEY">
          <VeltComments />
        </VeltProvider>
        ```
      </Step>

      <Step title="Add Comment Tool component">
        Add the `VeltCommentTool` component wherever you want to show the comment tool button.

        <img src="https://mintcdn.com/velt-mintlify-91561e57/TSAG_5m0lX2zHvPn/images/comment-tool.png?fit=max&auto=format&n=TSAG_5m0lX2zHvPn&q=85&s=63f71a62a73b65ef2ffbe1bcf71f677c" alt="" width="1304" height="856" data-path="images/comment-tool.png" />

        Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. Now you can click anywhere on the document to attach comments to any elements.

        ```js theme={null}
        <div className="toolbar">
          <VeltCommentTool />
        </div>
        ```
      </Step>

      <Step title="Test Integration">
        Test it out by opening the page with Velt components in your browser.

        Click on the `Comment Tool` and click anywhere on the page to add a comment.

        <img src="https://mintcdn.com/velt-mintlify-91561e57/uklJMYjPNuQgc1Al/images/standard-comment.png?fit=max&auto=format&n=uklJMYjPNuQgc1Al&q=85&s=9eacc2e97e8112b317500f54e9a2571f" alt="" width="1281" height="720" data-path="images/standard-comment.png" />
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Add Comment component">
        Add the comment component to your template. Try to put it as close to the root level of your `<body>`.

        This component is required to render comments in your app.

        ```html theme={null}
        <body>
          <velt-comments></velt-comments>
        </body>
        ```
      </Step>

      <Step title="Add Comment Tool component">
        Add the `<velt-comment-tool>` component wherever you want to show the comment tool button.

        <img src="https://mintcdn.com/velt-mintlify-91561e57/TSAG_5m0lX2zHvPn/images/comment-tool.png?fit=max&auto=format&n=TSAG_5m0lX2zHvPn&q=85&s=63f71a62a73b65ef2ffbe1bcf71f677c" alt="" width="1304" height="856" data-path="images/comment-tool.png" />

        Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. Now you can click anywhere on the document to attach comments to any elements.

        ```js theme={null}
        <div class="toolbar">
          <velt-comment-tool></velt-comment-tool>
        </div>
        ```
      </Step>

      <Step title="Test Integration">
        Test it out by adding a comment.

        You should be able to leave comments using the `Comment Tool`.

        <img src="https://mintcdn.com/velt-mintlify-91561e57/uklJMYjPNuQgc1Al/images/standard-comment.png?fit=max&auto=format&n=uklJMYjPNuQgc1Al&q=85&s=9eacc2e97e8112b317500f54e9a2571f" alt="" width="1281" height="720" data-path="images/standard-comment.png" />
      </Step>
    </Steps>
  </Tab>
</Tabs>

<RequestExample>
  ```jsx React / Next.js theme={null}
  import {
    VeltProvider,
    VeltComments,
    VeltCommentTool
  } from '@veltdev/react';

  export default function App() {

    return (
      <VeltProvider apiKey="API_KEY">
        <VeltComments />

        <div className="toolbar">
          <VeltCommentTool />
        </div>
      </VeltProvider>
    );
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Comment documentation</title>
    </head>
    <body>
      <velt-comments></velt-comments>

      <div class="toolbar">
        <velt-comment-tool></velt-comment-tool>
      </div>
    </body>
  </html>
  ```
</RequestExample>
