# Get started

Follow these steps to integrate Advanced Charts or Trading Platform into your project.

:::tip

If you prefer a visual guide, watch our [YouTube tutorial](https://youtu.be/UmYcyviNcR4?si=CKtG6ETVmY-oMaZi) on how to download the repository and set up your first local project.

:::

## 1. Get access

The libraries are hosted in a private GitHub repository. To get access:

1. Go to the product landing page you need and submit the access request form.
    - [Advanced Charts landing page](https://www.tradingview.com/advanced-charts/)
    - [Trading Platform landing page](https://www.tradingview.com/trading-platform/)
2. Once approved, you will receive a GitHub invitation to the repository.

:::caution

Advanced Charts and Trading Platform should only be downloaded from the official TradingView repositories provided within this documentation.
Obtaining the library from third-party services is strictly prohibited and may lead to legal consequences.

The library is not redistributable. It is prohibited to use any part of the library in public repositories.

:::

## 2. Install the library

Choose the installation method that best fits your development environment.

1. Clone or download the ZIP from the [Advanced Charts](https://github.com/tradingview/charting_library) or [Trading Platform](https://github.com/tradingview/trading_platform) repository.
    2. Create a project folder (e.g., `/example`). Copy the following folders from the repository into your project:
        - `charting_library/` — core library files.
        - `datafeeds/` — sample datafeed implementation.

  1. Configure `package.json`. Specify the library version using the `#semver` tag in your dependency list.
        Also note that files located in `node_modules/charting_library/` are not bundled during the build process.
        Ensure that these files are included on the server and can be accessed by a specific path.

        To do this, add a script to copy the files into a folder that serves static assets.
        In this example, the `public` folder is used, but this may vary based on your project structure.
        Adjust the `copy-files` command accordingly.

        ```json title="package.json" {4,8,12-13}
        {
            // For Advanced Charts
            "dependencies": {
                "charting_library": "git@github.com:tradingview/charting_library.git#semver:32.0.0"
            },
            // OR For Trading Platform
            "dependencies": {
                "charting_library": "git@github.com:tradingview/trading_platform.git#semver:32.0.0"
            },

            "scripts": {
                "postinstall": "npm run copy-files",
                "copy-files": "cp -R node_modules/charting_library/ public"
            }
        }
        ```

    2. Execute the command below. This will download the library and automatically trigger the `postinstall` script to move the static files into the specified directory.

        ```bash
        npm install
        ```

        :::info

        Installation will only work if your Git client is authenticated with GitHub. Ensure your [SSH public key](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) is added to your account.

        :::

### Package structure

Once installed, your project will contain the following components:

```text
+/charting_library                    # All library files (DO NOT EDIT)
    + /bundles                        # Internal library resources
    - charting_library.js             # UMD module for backward compatibility
    - charting_library.d.ts           # TypeScript definitions for the widget
    - charting_library.cjs.js         # CommonJS module
    - charting_library.esm.js         # Native JavaScript module for imports
    - charting_library.standalone.js  # IIFE module
    - datafeed-api.d.ts               # TypeScript definitions for the datafeed
    - package.json
+/datafeeds
    + /udf                             # Sample UDF-compatible datafeed wrapper
- index.html                           # Basic implementation example
- mobile_black.html                    # Mobile customization example (Dark)
- mobile_white.html                    # Mobile customization example (Light)
- test.html                            # Comprehensive customization example
```

- `/charting_library/bundles` stores library internal content and is not intended for other purposes.
    This directory is a "black box"; TradingView may change its content at any time without notice.
- `/datafeeds/udf/` contains the [UDF-compatible][udf-link] datafeed wrapper.
    This implements the [Datafeed API] to connect the library to your data source.
    You are free to edit this code.

:::tip

You can check the library version by running `TradingView.version()`  command in your browser console.
To learn how to move to a newer version, see the [Update the library] guide.

:::

## 3. Initialize the chart

To run the library, you need an HTML container and a script to initialize the [Widget Constructor].

1. Create a container for the chart and include the necessary script references.

    ```html title="/example/index.html"
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta charset = "UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <!-- Core library script -->
            <script src="charting_library/charting_library.standalone.js"></script>
            <!-- Sample UDF datafeed implementation -->
            <script src="datafeeds/udf/dist/bundle.js"></script>
        </head>

        <body>
            <!-- Chart container -->
            <div id="chartContainer"></div>
        </body>
    </html>
    ```

2. Initialize the [Widget Constructor] inside `<body>` to create a chart.
This example uses sample [UDF adapter][udf-link] so you can see a working chart immediately.

    ```html
    <script>
        new TradingView.widget({
            container: 'chartContainer',
            locale: 'en',
            library_path: 'charting_library/',
            datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
            symbol: 'AAPL',
            interval: '1D',
            fullscreen: true,
            debug: true
        });
    </script>
    ```

## 4. Run the project

1. Run one of the following commands in your project folder (e.g., `/example`) to start a local server:

    ```bash
        # Python 2.x
        python -m SimpleHTTPServer 9090

        # Python 3.x
        python -m http.server 9090
        ```

    ```bash
        # Install http-server
        npm install http-server -g
        # Start http-server
        http-server -p 9090
        ```

    Add a server block to your `nginx.conf` and point the root to your project folder:

        ```nginx
        server {
            listen       9090;
            server_name  localhost;

            // Replace with the absolute path to your /example folder
            location / {
                root ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER;
            }
        }
        ```

2. Open `http://localhost:9090` in your web browser. You should see the chart rendering AAPL data.

## Next steps

[Datafeed API]: https://charting-library-docs.xstaging.tv/latest/connecting_data/datafeed-api.md
[Widget Constructor]: https://charting-library-docs.xstaging.tv/latest/configuration/Widget-Constructor.md
[udf-link]: https://charting-library-docs.xstaging.tv/latest/connecting_data/UDF.md
[Update the library]: https://charting-library-docs.xstaging.tv/latest/releases/Update-Library.md

---

## Sitemap

- [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt)
- [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)