# 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.

**Direct download**

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.

**NPM**

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:

**Python**

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

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

**Node.js**

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

**NGINX**

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

- [Connect your data source](https://www.tradingview.com/charting-library-docs/latest/connecting_data.md) - Learn how to replace the demo feed with your own real-time data using the UDF adapter or Datafeed API.
- [Widget configuration](https://www.tradingview.com/charting-library-docs/latest/configuration/Widget-Constructor.md) - Master the Widget Constructor. Set up essential technical parameters, including default locale, timezones, and timeframe.
- [Framework integrations](https://www.tradingview.com/charting-library-docs/latest/tutorials/framework-integrations.md) - View production-ready implementation examples and best practices for React, Angular, Vue, and other frameworks.
- [UI elements](https://www.tradingview.com/charting-library-docs/latest/ui_elements.md) - Manage the visibility and behavior of the chart's interface, from toolbars and context menus to drawings and indicators.
- [Customization](https://www.tradingview.com/charting-library-docs/latest/customization.md) - Tailor the chart's appearance to your brand. Learn how to apply dark and light themes and override default colors and styles.
- [Broker integration](https://www.tradingview.com/charting-library-docs/latest/trading_terminal/trading-concepts.md) - Enable order execution by connecting your brokerage backend to the chart using the Broker API.

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

---

## Sitemap

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