diff --git a/.circleci/config.yml b/.circleci/config.yml
index 914243add1..36392133dd 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -29,14 +29,17 @@ aliases:
 
 
 executors:
-  node-latest-executor:
+  node12-executor:
     docker:
       - image: circleci/node:12
 
-  node-browsers-latest-executor:
+  node12-browsers-executor:
     docker:
       - image: circleci/node:12-browsers
 
+  node14-executor:
+    docker:
+      - image: cimg/node:14.18
 
 commands:
   checkout-with-deps:
@@ -73,14 +76,14 @@ commands:
 
 jobs:
   install-deps:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - run: npm install
       - save_cache: *save-node-modules-cache
 
   build:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       # make sure that the project is compiled successfully with composite projects
@@ -94,31 +97,31 @@ jobs:
             - dist
 
   no-crlf:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout
       - run: scripts/no-crlf.sh
 
   trailing-lf:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout
       - run: scripts/trailing-newlines.sh
 
   lint-js:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - run: npm run lint:js
 
   lint-ts:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - run: npm run lint:ts
 
   lint-dts:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - attach_workspace:
@@ -127,14 +130,14 @@ jobs:
       - run: npm run check-dts-docs
 
   markdown:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - run: npm run lint:md
       - run: npm run check-markdown-links
 
   unittests:
-    executor: node-latest-executor
+    executor: node12-executor
     environment:
       TESTS_REPORT_FILE: "test-results/unittests/results.xml"
     steps:
@@ -144,7 +147,7 @@ jobs:
           path: test-results/
 
   dts-changes:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - run: scripts/check-dts-changes.sh ./dts-changes $(git merge-base origin/master HEAD) $(git rev-parse HEAD)
@@ -153,25 +156,25 @@ jobs:
           when: on_fail
 
   graphics-tests-dpr1_0:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     steps:
       - run-graphics-tests:
           devicePixelRatio: "1.0"
 
   graphics-tests-dpr1_5:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     steps:
       - run-graphics-tests:
           devicePixelRatio: "1.5"
 
   graphics-tests-dpr2_0:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     steps:
       - run-graphics-tests:
           devicePixelRatio: "2.0"
 
   graphics-tests-dpr2_0-prod:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     steps:
       - run-graphics-tests:
           devicePixelRatio: "2.0"
@@ -179,7 +182,7 @@ jobs:
 
 
   memleaks-tests:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     environment:
       NO_SANDBOX: "true"
       TESTS_REPORT_FILE: "test-results/memleaks/results.xml"
@@ -192,7 +195,7 @@ jobs:
           path: test-results/
 
   coverage:
-    executor: node-browsers-latest-executor
+    executor: node12-browsers-executor
     environment:
       NO_SANDBOX: "true"
       TESTS_REPORT_FILE: "test-results/coverage/results.xml"
@@ -205,7 +208,7 @@ jobs:
           path: test-results/
 
   size-limit:
-    executor: node-latest-executor
+    executor: node12-executor
     steps:
       - checkout-with-deps
       - attach_workspace:
@@ -215,6 +218,39 @@ jobs:
           command: node scripts/compare-size-with-merge-base.js
       - run: npm run size-limit
 
+  build-docusaurus-website:
+    executor: node14-executor
+    steps:
+      - checkout-with-deps
+      - attach_workspace:
+          at: ./
+      - run: 
+          name: "Install dependencies and build website"
+          command: |
+            cd website
+            npm install
+            npm run build
+      - persist_to_workspace:
+          root: ./
+          paths:
+            - website
+
+  deploy-docusaurus-website:
+    executor: node14-executor
+    environment:
+      USE_SSH: "true"
+    steps:
+      - checkout-with-deps
+      - attach_workspace:
+          at: ./
+      - add_ssh_keys:
+          fingerprints:
+            - "cb:bc:16:a1:03:fb:b5:fb:69:4b:68:4d:33:a9:54:8c"
+      - run:
+          name: "Deploy website"
+          command: |
+            cd website
+            npm run deploy -- --skip-build
 
 workflows:
   version: 2
@@ -285,3 +321,13 @@ workflows:
           filters: *default-filters
           requires:
             - build
+      - build-docusaurus-website:
+          filters: *default-filters
+          requires:
+            - build
+      - deploy-docusaurus-website:
+          filters:
+            branches:
+              only: master
+          requires:
+            - build-docusaurus-website
diff --git a/.eslintignore b/.eslintignore
index 35cb4cb1c3..2904e057f2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,6 @@
 /lib/**
 
 **/node_modules
+
+/website/docs/api/**
+/website/build/**
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 8795b2a328..c6868306f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,10 @@ debug.html
 /dist/
 /src/**/*.js
 /src/**/*.d.ts
+/website/docs/api/
+/website/build
+/website/.docusaurus
+/website/.cache-loader
 
 !/src/typings/**/*.d.ts
 
diff --git a/README.md b/README.md
index 7b1d001783..bac057f7a8 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
 
 <!-- markdownlint-enable no-inline-html -->
 
-[Demos][demo-url] | [Documentation](./docs/README.md) | [Discord community](https://discord.gg/E6UthXZ)
+[Demos][demo-url] | [Documentation](https://github.com/tradingview/lightweight-charts/tree/b58f2c3e7f539db5baab660bc50842367f5ed4fb/docs) | [Discord community](https://discord.gg/E6UthXZ)
 
 TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts.
 
diff --git a/docs/constants.md b/docs/constants.md
deleted file mode 100644
index d00f7b920f..0000000000
--- a/docs/constants.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Constants
-
-The `lightweight-charts` package exports some enums which you can use to set up your chart, series etc.
-
-These enums are described here.
-
-## LineType
-
-`LineType` enum is used to specify the type of the line for series such as area or line.
-It has the following values:
-
-- `LineType.Simple`
-- `LineType.WithSteps`
-
-## LineStyle
-
-`LineStyle` enum is used to specify the line style of area and line series, crosshair and grid lines, a priceline and a baseline.
-It has the following values:
-
-- `LineStyle.Solid`
-- `LineStyle.Dotted`
-- `LineStyle.Dashed`
-- `LineStyle.LargeDashed`
-- `LineStyle.SparseDotted`
-
-## PriceScaleMode
-
-`PriceScaleMode` enum is used to specify the price scale mode.
-
-It has the following values:
-
-- `PriceScaleMode.Normal` - normal mode.
-
-    Price scale shows prices and price range is changing linearly.
-
-- `PriceScaleMode.Logarithmic` - logarithmic mode.
-
-    Price scale shows prices, but price range is changing logarithmically.
-
-- `PriceScaleMode.Percentage` - percentage mode.
-
-    Price scale shows percentage values according the first visible value of the price scale.
-    The first visible value is `0%` in this mode.
-
-- `PriceScaleMode.IndexedTo100`- indexed to 100 mode.
-
-    The same as percentage mode, but the first value is moved to 100.
-
-## CrosshairMode
-
-`CrosshairMode` enum is used to specify crosshair mode.
-
-It has the following values:
-
-- `CrosshairMode.Magnet` - magnet mode of the crosshair.
-
-    Crosshair horizontal line is anchored to bar close price.
-
-- `CrosshairMode.Normal` - normal mode of the crosshair.
-
-    Crosshair moves freely on the chart.
-
-## PriceLineSource
-
-`PriceLineSource` enum is used to specify the source of data to be used for the horizontal price line.
-
-It has the following values:
-
-- `PriceLineSource.LastBar` - use the last bar data.
-- `PriceLineSource.LastVisible` - use the last visible data of the chart viewport.
-
-## TickMarkType
-
-`TickMarkType` enum is used to specify a type of a tick mark on the time axis.
-
-It has the following values:
-
-- `TickMarkType.Year` - the tick mark represents the start of the year (e.g. it's the first tick mark in a year).
-- `TickMarkType.Month` - the tick mark represents the start of the month (e.g. it's the first tick mark in a month).
-- `TickMarkType.DayOfMonth` - the tick mark represents a day of the month.
-- `TickMarkType.Time` - the tick mark represents a time without seconds.
-- `TickMarkType.TimeWithSeconds` - the tick mark represents a full time format.
-
-## LastPriceAnimationMode
-
-`LastPriceAnimationMode` enum is used to specify the type of the last price animation for series such as area or line.
-It has the following values:
-
-- `LastPriceAnimationMode.Disabled` - animation is always disabled.
-- `LastPriceAnimationMode.Continuous` - animation is always enabled.
-- `LastPriceAnimationMode.OnDataUpdate` - animation is active some time after data update.
-
-## ColorType
-
-`ColorType` enum is used to specify a type of color.
-
-- `ColorType.Solid` - solid color.
-- `ColorType.VerticalGradient` - gradient color.
diff --git a/docs/events.md b/docs/events.md
deleted file mode 100644
index 8817b9393b..0000000000
--- a/docs/events.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Events
-
-Event subscriptions can notify you of such chart/user interactions as mouse clicks/moving of mouse cursor and changes of the chart visible time range.
-
-## Click
-
-|Name|Description|
-|-|-|
-|`subscribeClick(handler: MouseEventHandler): void;`|Get notified when a mouse clicks on a chart|
-|`unsubscribeClick(handler: MouseEventHandler): void;`|Don't get notified when a mouse clicks on a chart|
-
-Example:
-
-```js
-function handleClick(param) {
-    if (!param.point) {
-        return;
-    }
-
-    console.log(`An user clicks at (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
-}
-
-chart.subscribeClick(handleClick);
-
-// ... after some time
-
-chart.unsubscribeClick(handleClick);
-```
-
-## Crosshair move
-
-|Name|Description|
-|-|-|
-|`subscribeCrosshairMove(handler: MouseEventHandler): void;`|Get notified when a mouse moves on a chart|
-|`unsubscribeCrosshairMove(handler: MouseEventHandler): void;`|Don't get notified when a mouse moves on a chart|
-
-Example:
-
-```js
-function handleCrosshairMoved(param) {
-    if (!param.point) {
-        return;
-    }
-
-    console.log(`A user moved the crosshair to (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
-}
-
-chart.subscribeCrosshairMove(handleCrosshairMoved);
-
-// ... after some time
-
-chart.unsubscribeCrosshairMove(handleCrosshairMoved);
-```
-
-## Types
-
-### MouseEventHandler
-
-MouseEventHandler is a type of callback that is used in the subscription methods.
-
-```ts
-export type MouseEventHandler = (param: MouseEventParams) => void;
-```
-
-`MouseEventParams` is an object with the following fields:
-
-- `time` (`Time`, optional) - time
-- `point`: (`{ x: number, y: number }`, optional) - coordinate
-- `seriesPrices`: (`Map<ISeriesApi, number | OHLC>`) - series prices
-
-`time` is not defined if an event was fired outside of data range (e.g. right/left of all data points).
-
-`point` is not defined if an event was fired outside of the chart (for example on a mouse leave event).
-
-`seriesPrices` is an object with prices of all series corresponding to the event point. The object keys are series APIs, values are prices. Each price value is a number for single-value series types (line, area, histogram) or OHLC structure for candlestick and bar series.
diff --git a/docs/time-scale.md b/docs/time-scale.md
deleted file mode 100644
index 0c80d265df..0000000000
--- a/docs/time-scale.md
+++ /dev/null
@@ -1,322 +0,0 @@
-# Time Scale
-
-Time scale (or time axis) is a horizontal scale at the bottom of the chart that displays the time of bars.
-
-## Time scale options
-
-|Name|Type|Default|Description|
-|----------------------------|-------|-------|--|
-|`rightOffset`|`number`|`0`|Sets the margin space in bars from the right side of the chart|
-|`barSpacing`|`number`|`6`|Sets the space between bars in pixels|
-|`minBarSpacing`|`number`|`0.5`|Sets the min space between bars in pixels|
-|`fixLeftEdge`|`boolean`|`false`|If true, prevents scrolling to the left of the first historical bar|
-|`fixRightEdge`|`boolean`|`false`|If true, prevents scrolling to the right of the most recent bar|
-|`lockVisibleTimeRangeOnResize`|`boolean`|`false`|If true, prevents changing visible time area during chart resizing|
-|`rightBarStaysOnScroll`|`boolean`|`false`|If false, the hovered bar remains in the same place when scrolling|
-|`borderVisible`|`boolean`|`true`|If true, the time scale border is visible|
-|`borderColor`|`string`|`#2b2b43`|The time scale border color|
-|`visible`|`boolean`|`true`|If true, the time scale is shown on a chart|
-|`timeVisible`|`boolean`|`false`|If true, the time is shown on the time scale and in the vertical crosshair label|
-|`secondsVisible`|`boolean`|`true`|If true, seconds are shown on the label of the crosshair vertical line in `hh:mm:ss` format on intraday intervals|
-|`shiftVisibleRangeOnNewBar`|`boolean`|`true`|If true, the visible range is shifted by the number of new bars when new bars are added (note that this only applies when the last bar is visible)|
-|`tickMarkFormatter`|`(TimePoint, TickMarkType, locale) => string` &#124; `undefined`|`undefined`|Allows to override the tick marks formatter (see below)|
-
-### Tick marks formatter
-
-Tick marks formatter can be used to customize tick marks labels on the time axis.
-
-To customize it, you need to provide the `tickMarkFormatter` option. It's a function with the following declaration:
-
-```ts
-export type TickMarkFormatter = (time: UTCTimestamp | BusinessDay, tickMarkType: TickMarkType, locale: string) => string;
-```
-
-Where `time` is [Time](./time.md) object, `type` is [TickMarkType](./constants.md#TickMarkType) enum and `locale` is the currently applied locale of the string type.
-
-This function should return `time` as a string formatted according to `tickMarkType` type (year, month, etc) and `locale`.
-
-Note that the returned string should be the shortest possible value and should have no more than 8 characters.
-Otherwise, the tick marks will overlap each other.
-
-### Example of time scale customization
-
-```js
-chart.applyOptions({
-    timeScale: {
-        rightOffset: 12,
-        barSpacing: 3,
-        fixLeftEdge: true,
-        lockVisibleTimeRangeOnResize: true,
-        rightBarStaysOnScroll: true,
-        borderVisible: false,
-        borderColor: '#fff000',
-        visible: true,
-        timeVisible: true,
-        secondsVisible: false,
-        tickMarkFormatter: (time, tickMarkType, locale) => {
-            console.log(time, tickMarkType, locale);
-            const year = LightweightCharts.isBusinessDay(time) ? time.year : new Date(time * 1000).getUTCFullYear();
-            return String(year);
-        },
-    },
-});
-```
-
-## Time scale API
-
-### scrollPosition()
-
-Returns a distance from the right edge of the time scale to the latest bar of the series, measured in bars.
-
-```js
-chart.timeScale().scrollPosition();
-```
-
-### scrollToPosition()
-
-Function scrolls the chart to the specified position in time. It has the following arguments:
-
-`position` - amount of time points from the latest bar
-
-`animated` - if true, the series is scrolled smoothly with animation
-
-```js
-chart.timeScale().scrollToPosition(2, true);
-```
-
-### scrollToRealTime()
-
-Restores default scroll position of the chart. This process is always animated.
-
-```js
-chart.timeScale().scrollToRealTime();
-```
-
-### getVisibleRange()
-
-Returns the current visible time range of the chart as an object with the first and last time points of the time range, or returns `null` if the chart has no data at all.
-
-```js
-chart.timeScale().getVisibleRange();
-```
-
-### setVisibleRange()
-
-Sets visible time range of the chart. The argument is an object with the first and last time points of a desired time range.
-
-```js
-chart.timeScale().setVisibleRange({
-    from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000,
-    to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000,
-});
-```
-
-### getVisibleLogicalRange
-
-Returns the current visible [logical range](#logical-range) of the chart as an object with the first and last time points of the logical range, or returns `null` if the chart has no data at all.
-
-```js
-chart.timeScale().getVisibleLogicalRange();
-```
-
-### setVisibleLogicalRange
-
-Sets visible [logical range](#logical-range) of the chart.
-The argument is an object with the first and last time points of a desired logical range.
-
-```js
-chart.timeScale().setVisibleLogicalRange({
-    from: 0,
-    to: 10,
-});
-```
-
-### resetTimeScale()
-
-Restores default zoom and scroll position of the time scale.
-
-```js
-chart.timeScale().resetTimeScale();
-```
-
-### fitContent()
-
-Automatically calculates the visible range to fit all series data.
-
-```js
-chart.timeScale().fitContent();
-```
-
-### timeToCoordinate
-
-Converts a time to local `x` coordinate.
-The argument is [Time](./time.md) that needs to be converted into a coordinate.
-
-Returns `x` coordinate of a bar with passed time or `null` if no bar found.
-
-```js
-chart.timeScale().timeToCoordinate('1990-04-24');
-```
-
-### coordinateToTime
-
-Converts `x` coordinate to [Time](./time.md).
-The argument is the `x` coordinate that needs to be converted into a time.
-
-Returns [Time](./time.md) of a bar that is located on the passed coordinate or `null` if there are no bars on that coordinate.
-
-```js
-chart.timeScale().coordinateToTime(42);
-```
-
-### width
-
-Returns a current width of the time scale.
-
-```js
-console.log(chart.timeScale().width());
-```
-
-### height
-
-Returns a current height of the time scale.
-
-```js
-console.log(chart.timeScale().height());
-```
-
-### logicalToCoordinate
-
-Converts a logical index to the local `x` coordinate.
-The argument is the logical index that needs to be converted into a coordinate.
-
-Returns the `x` coordinate of the logical position or `null` if the chart doesn't have data.
-
-```js
-chart.timeScale().logicalToCoordinate(10);
-```
-
-### coordinateToLogical
-
-Converts the `x` coordinate to a logical index.
-The argument is the `x` coordinate that needs to be converted into a logical index.
-
-Returns a logical index that is located on the passed coordinate or `null` if the chart doesn't have data.
-
-```js
-chart.timeScale().coordinateToLogical(42);
-```
-
-### applyOptions()
-
-Applies new options to the time scale. The argument is an object with options that should be modified.
-
-```js
-chart.timeScale().applyOptions({
-    rightOffset: 12,
-    borderVisible: false,
-});
-```
-
-### options()
-
-Returns an object with options currently applied to the time scale.
-
-```js
-chart.timeScale().options();
-```
-
-### subscribeVisibleTimeRangeChange
-
-Allows to subscribe to the visible time range changed event.
-The argument is a handler function, which will be called with the new visible time range.
-
-The argument passed to your handler is the new visible time range, which might be either:
-
-- an object with properties `from` and `to` of type [Time](./time.md), that are the first and last visible time points, respectively
-- `null` if nothing is visible or the chart has no data at all
-
-```js
-function onVisibleTimeRangeChanged(newVisibleTimeRange) {
-    console.log(newVisibleTimeRange);
-}
-
-chart.timeScale().subscribeVisibleTimeRangeChange(onVisibleTimeRangeChanged);
-```
-
-### unsubscribeVisibleTimeRangeChange
-
-Allows to unsubscribe the previously subscribed handler from the visible time range changed event.
-The argument is a handler function, which you've passed to the [`subscribeVisibleTimeRangeChange`](#subscribeVisibleTimeRangeChange).
-
-```js
-chart.timeScale().unsubscribeVisibleTimeRangeChange(onVisibleTimeRangeChanged);
-```
-
-### subscribeVisibleLogicalRangeChange
-
-Allows to subscribe to the visible [logical range](#logical-range) changed event.
-The argument is a handler function, which will be called with the new visible logical range.
-
-The argument passed to your handler is the new visible logical range, which might be either:
-
-- an object with numerical properties `from` and `to` of type number (see [Logical range](#logical-range) section), that are the first and last visible logical indexes, respectively
-- `null` if the chart has no data at all
-
-```js
-function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
-    console.log(newVisibleLogicalRange);
-}
-
-chart.timeScale().subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);
-```
-
-### unsubscribeVisibleLogicalRangeChange
-
-Allows to unsubscribe the previously subscribed handler from the visible logical range changed event.
-The argument is a handler function, which you've passed to the [`subscribeVisibleLogicalRangeChange`](#subscribeVisibleLogicalRangeChange).
-
-```js
-chart.timeScale().unsubscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChanged);
-```
-
-### subscribeSizeChange
-
-Allows to subscribe to the size change event.
-The argument is a handler function, which will be called with the new width and height.
-
-```js
-function onSizeChanged(width, height) {
-    console.log(width, height);
-}
-
-chart.timeScale().subscribeSizeChange(onSizeChanged);
-```
-
-### unsubscribeSizeChange
-
-Allows to unsubscribe the previously subscribed handler from the size change event.
-The argument is a handler function, which you've passed to the [`subscribeSizeChange`](#subscribeSizeChange).
-
-```js
-chart.timeScale().unsubscribeSizeChange(onSizeChanged);
-```
-
-## Logical range
-
-Logical range is an object with 2 properties: `from` and `to`, which are numbers and represent logical indexes on the time scale.
-
-The starting point of the time scale's logical range is the first data item among all series.
-Before that point all indexes are negative, starting from that point - positive.
-
-Indexes might have fractional parts, for instance 4.2, due to the time-scale being continuous rather than discrete.
-
-Integer part of the logical index means index of the fully visible bar (see image below).
-Thus, if we have 5.2 as the last visible logical index (`to` field), that means that the last visible bar has index 5, but we also have partially visible (for 20%) 6th bar.
-Half (e.g. 1.5, 3.5, 10.5) means exactly a middle of the bar.
-
-![Logical range](./assets/logical-range.png "Logical range")
-
-Red vertical lines here are borders between bars.
-
-Thus, the visible logical range in the image above is from -4.73 to 5.05.
diff --git a/package.json b/package.json
index e53724a559..82d1778521 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "lint": "npm-run-all -p lint:**",
     "lint:js": "eslint --format=unix --ext .js,.md,.javascript ./",
     "lint:ts": "eslint --format=unix --ext .ts,.typescript ./",
-    "lint:md": "./node_modules/.bin/markdownlint -i \"**/node_modules/**\" \"**/*.md\"",
+    "lint:md": "./node_modules/.bin/markdownlint -i \"**/node_modules/**\" -i \"**/website/docs/api/**\" \"**/*.md\"",
     "check-dts-docs": "eslint --format=unix ./dist/typings.d.ts",
     "check-markdown-links": "node scripts/check-markdown-links.js",
     "rollup": "rollup -c rollup.config.js",
diff --git a/scripts/check-markdown-links.js b/scripts/check-markdown-links.js
index d66e3dce63..bad793709a 100755
--- a/scripts/check-markdown-links.js
+++ b/scripts/check-markdown-links.js
@@ -103,14 +103,14 @@ function collectFilesData(inputFiles) {
 			continue;
 		}
 
-		if (!fs.existsSync(filePath)) {
-			throw new Error(`File or directory "${filePath}" doesn't exist`);
-		}
-
 		if (path.extname(filePath) !== '.md') {
 			continue;
 		}
 
+		if (!fs.existsSync(filePath)) {
+			throw new Error(`File or directory "${filePath}" doesn't exist`);
+		}
+
 		const fileContent = fs.readFileSync(filePath, { encoding: 'utf-8' });
 		const fileTokens = md.parse(fileContent, {});
 
@@ -163,7 +163,10 @@ function main() {
 	const files = glob.sync('**/*.md', {
 		dot: true,
 		nodir: true,
-		ignore: '**/node_modules/**',
+		ignore: [
+			'**/node_modules/**',
+			'**/docs/api/**',
+		],
 	});
 
 	let filesData;
diff --git a/src/model/time-data.ts b/src/model/time-data.ts
index 52925f042c..5863667ed9 100644
--- a/src/model/time-data.ts
+++ b/src/model/time-data.ts
@@ -22,7 +22,7 @@ import { RangeImpl } from './range-impl';
 export type UTCTimestamp = Nominal<number, 'UTCTimestamp'>;
 
 /**
- * Represents a time as a day/week/month.
+ * Represents a time as a day/month/year.
  *
  * ```js
  * const day = { year: 2019, month: 6, day: 1 }; // June 1, 2019
diff --git a/website/.browserslistrc b/website/.browserslistrc
new file mode 100644
index 0000000000..ff0fd14c7e
--- /dev/null
+++ b/website/.browserslistrc
@@ -0,0 +1,9 @@
+[production]
+>0.5%
+not dead
+not op_mini all
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
\ No newline at end of file
diff --git a/website/README.md b/website/README.md
new file mode 100644
index 0000000000..9d47cca71f
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,53 @@
+# Lightweight Charts Documentation Website
+
+The source of the documentation website for Lightweight Charts. This website is built using [Docusaurus 2](https://v2.docusaurus.io/).
+
+The aim of this documentation is to make using the library frictionless.
+
+API documentation is automatically generated from the `typings.d.ts` file, which itself is generated as part of the library build process.
+
+Handwritten documentation should focus on explaining concepts, tutorials, interactive examples, or in general anything that can't be automatically generated.
+
+## Local Development
+
+```console
+npm start
+```
+
+_Note_: API documentation will not be generated unless you have already built the library and its `typings.d.ts` file.
+
+This command starts a local development server and opens a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+npm build
+```
+
+_Note_: API documentation will not be generated unless you have already built the library and its `typings.d.ts` file.
+
+This command generates static content in the `build` directory.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> GITHUB_ORGANIZATION_NAME=<Your Github username or organisation name> USE_SSH=true npm deploy
+```
+
+_Note_: API documentation will not be generated unless you have already built the library and its `typings.d.ts` file.
+
+This will build the website into static files and push the files to the `gh-pages` branch.
+
+## CircleCI
+
+We use CircleCI to build, test, publish the library, and to deploy this website.
+
+The `build-docusaurus-website` and `deploy-docusaurus-website` jobs defined in `.circleci/config.yml` build and deploy the website.
+
+The `build-docusaurus-website` job is run for all branches (so that, for example, we can get feedback about any changes that might break the website build before merging).
+
+The `deploy-docusaurus-website` job is only run on the master branch.
+
+## Docusaurus CLI
+
+You can read more about the commands used to build, deploy, and more in the [Docusaurus CLI documentation.](https://docusaurus.io/docs/cli)
diff --git a/website/babel.config.js b/website/babel.config.js
new file mode 100644
index 0000000000..6b5e0c86e6
--- /dev/null
+++ b/website/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/docs/3.0-breaking-changes.md b/website/docs/3.0-breaking-changes.md
similarity index 92%
rename from docs/3.0-breaking-changes.md
rename to website/docs/3.0-breaking-changes.md
index 209057206d..05a1db6b83 100644
--- a/docs/3.0-breaking-changes.md
+++ b/website/docs/3.0-breaking-changes.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 8
+---
 # Version 3.0 breaking changes
 
 Lightweight charts library 3.0 announces the major improvements: supporting two price scales and improving the time scale API.
@@ -10,8 +13,8 @@ In this document you can find the migration guide from the previous version to 3
 Previously, to handle changing visible time range you needed to use `subscribeVisibleTimeRangeChange` and `unsubscribeVisibleTimeRangeChange` to subscribe and unsubscribe from visible range events.
 These methods were available in the chart object  (e.g. you call it like `chart.subscribeVisibleTimeRangeChange(func)`).
 
-In 3.0 in order to make API more consistent with the new API we decided to move these methods to [time scale API](./time-scale.md)
-(along with the new subscription methods [`subscribeVisibleLogicalRangeChange`](./time-scale.md#subscribevisiblelogicalrangechange) and [`unsubscribeVisibleLogicalRangeChange`](./time-scale.md#unsubscribevisiblelogicalrangechange)).
+In 3.0 in order to make API more consistent with the new API we decided to move these methods to [time scale API](/api/interfaces/ITimeScaleApi)
+(along with the new subscription methods [`subscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) and [`unsubscribeVisibleLogicalRangeChange`](/api/interfaces/ITimeScaleApi#unsubscribevisiblelogicalrangechange)).
 
 So, to migrate your code to 3.0 you just need to replace:
 
diff --git a/docs/customization.md b/website/docs/customization.md
similarity index 57%
rename from docs/customization.md
rename to website/docs/customization.md
index 59f394245c..b599c27af9 100644
--- a/docs/customization.md
+++ b/website/docs/customization.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 6
+---
+
 # Customization
 
 ## Initial chart options
@@ -121,20 +125,7 @@ Price scale has 4 data display modes:
 
 The scale itself can be positioned either on the right/left side of a series. Use `position: none` if you don't want it to be visible on the chart.
 
-The following set of options can be used to adjust the price axis interface:
-
-|Name|Type|Default|Description|
-|--|---|-|--|
-|`position`|`left` &#124; `right` &#124; `none`|`right`|Sets the position to display price scale|
-|`mode`|[PriceScaleMode](./constants.md#pricescalemode) |`PriceScaleMode.Normal`|Sets the price scale mode|
-|`autoScale`|`boolean`|`true`|If true, fits series data to a chart size|
-|`invertScale`|`boolean`|`false`|If true, a chart series is reflected vertically, so that a growing trend is shown as a falling one and vice versa|
-|`alignLabels`|`boolean`|`true`|If true, labels with price data do not overlap|
-|`borderVisible`|`boolean`|`true`|If true, price scale border is visible|
-|`borderColor`|`string`|`#2b2b43`|Pricescale border color|
-|`scaleMargins`|`{ bottom, top }`|`{ bottom: 0.1, top: 0.2 }`|Sets the series margins from the top and bottom chart borders (percent)|
-|`entireTextOnly`|`boolean`|`false`|If false, top and bottom corner labels are shown even if they are partially not visible |
-|`drawTicks`|`boolean`|`true`|If true, a small horizontal line is drawn on price axis labels|
+The following set of options can be used to adjust the price axis interface: [PriceScaleOptions](/api/interfaces/PriceScaleOptions).
 
 ### An example of a price scale customization
 
@@ -171,17 +162,7 @@ Crosshair has two moving modes:
 
 Note that crosshair lines have to be customized separately.
 
-The following options are available for vertical and horizontal lines of a crosshair:
-
-|Name                        |Type   |Default |Description|
-|----------------------------|-------|--------|-|
-|`color`|`string`|`#758696`|Crosshair line color|
-|`width`|`number`|`1`|Crosshair line width in pixels|
-|`style`|[LineStyle](./constants.md#linestyle)|`LineStyle.Dashed`|Crosshair line style|
-|`visible`|`boolean`|`true`|If true, crosshair line is displayed on a chart|
-|`labelVisible`|`boolean`|`true`|If true, a data label is shown on a relevant scale|
-|`labelBackgroundColor`|`string`|`#4c525e`|Crosshair label background color|
-|`mode`|[CrosshairMode](./constants.md#crosshairmode)|`CrosshairMode.Magnet`|Sets the mode of crosshair moving.|
+The following options are available for vertical and horizontal lines of a crosshair: [CrosshairOptions](/api/interfaces/CrosshairOptions).
 
 ### An example of a crosshair customization
 
@@ -213,13 +194,7 @@ A grid is represented in chart background by vertical and horizontal lines drawn
 It is possible to set a custom `color` and `style` for grid lines or disable their visibility if necessary.
 Note that vertical and horizontal lines of a grid have to be customized separately.
 
-The following options are available for vertical and horizontal lines of a grid:
-
-|Name|Type|Default  |Description|
-|-|-|-|-|
-|`color`|`string`|`#d6dcde`|Grid lines color|
-|`style`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Grid lines style|
-|`visible`|`boolean`|`true`|If true, grid lines are displayed on a chart|
+The following options are available for vertical and horizontal lines of a grid: [GridOptions](/api/interfaces/GridOptions).
 
 ### An example of a grid customization
 
@@ -248,18 +223,7 @@ Please make sure you enable it and set an appropriate font color and size to mak
 We recommend a semi-transparent color and a large font.
 Also note that watermark position can be aligned vertically and horizontally.
 
-The following options are available for the watermark:
-
-|Name                        |Type   |Default  |Description|
-|----------------------------|-------|---------|-|
-|`color`|`string`|`rgba(0, 0, 0, 0)`|Watermark color|
-|`visible`|`boolean`|`false`|If true, the watermark is displayed on a chart|
-|`text`|`string`|`''`|Contains the text to be displayed in the watermark|
-|`fontSize`|`number`|`48`|Watermark's font size in pixels|
-|`fontFamily`|`string`|`'Trebuchet MS', Roboto, Ubuntu, sans-serif`|Watermark's font family|
-|`fontStyle`|`string`|`''`|Watermark's font style|
-|`horzAlign`|`left` &#124; `center` &#124; `right`|`center`|Watermark horizontal alignment position|
-|`vertAlign`|`top` &#124; `center` &#124; `bottom`|`center`|Watermark vertical alignment position|
+The following options are available for the watermark: [WatermarkOptions](/api/interfaces/WatermarkOptions).
 
 ### An example of a watermark customization
 
@@ -278,14 +242,7 @@ chart.applyOptions({
 
 ## Chart layout options
 
-The following options can be used to customize chart design:
-
-|Name                        |Type   |Default  |Description|
-|----------------------------|-------|---------|-----------|
-|`background`|[Background](./#background)| `{ type: ColorType.Solid, color: '#ffffff' }` |Chart and scales background|
-|`textColor`|`string`|`#191919`|Scale value text color|
-|`fontSize`|`number`|`11`|Scales values' font size|
-|`fontFamily`|`string`|`'Trebuchet MS', Roboto, Ubuntu, sans-serif`|Font family to be used on scales|
+The following options can be used to customize chart design: [LayoutOptions](/api/interfaces/LayoutOptions).
 
 ### Background
 
@@ -326,45 +283,23 @@ You can disable any of them using `handleScroll` and `handleScale` options.
 
 ### Scrolling options
 
-|Name                        |Type   |Default  |Description|
-|----------------------------|-------|---------|-|
-|`mouseWheel`|`boolean`|`true`|If true, chart scrolling with horizontal mouse wheel is enabled|
-|`pressedMouseMove`|`boolean`|`true`|If true, chart scrolling with left mouse button pressed is allowed|
-|`horzTouchDrag`|`boolean`|`true`|If true, the chart handles horizontal pointer movements on touch screens. In this case the webpage is not scrolled. If you set it to false, the webpage is scrolled instead. Keep in mind that if the user starts scrolling the chart vertically or horizontally, scrolling is continued in any direction until the user releases the finger|
-|`vertTouchDrag`|`boolean`|`true`|If true, the chart handles vertical pointer movements on touch screens. In this case the webpage is not scrolled. If you set it to false, the webpage is scrolled instead. Keep in mind that if the user starts scrolling the chart vertically or horizontally, scrolling is continued in any direction until the user releases the finger.|
-
-You can also set `handleScroll` to `true` or `false` to enable or disable all the above options.
+See [HandleScrollOptions](/api/interfaces/HandleScrollOptions).
 
 ### Kinetic scroll options
 
 You can disable or enable kinetic scroll via mouse or via touch gestures separately using `kineticScroll` options.
 
-| Name    | Type      | Default | Description |
-|---------|-----------|---------|-------------|
-| `mouse` | `boolean` | `false` | If true, kinetic scroll is enabled via mouse |
-| `touch` | `boolean` | `true` | If true, kinetic scroll is enabled via touch gestures |
+See [KineticScrollOptions](/api/interfaces/KineticScrollOptions).
 
 ### Scaling options
 
-|Name                        |Type   |Default  |Description|
-|----------------------------|-------|---------|-|
-|`axisPressedMouseMove`|[`{ time, price }`](#axis-scaling-options)|`{ time: true, price: true }`|Sets time and price axis scaling with left mouse button pressed is allowed|
-|`axisDoubleClickReset`|`boolean`|`true`|If true, left mouse button double click axis resetting is allowed|
-|`mouseWheel`|`boolean`|`true`|If true, series scaling with a mouse wheel is enabled|
-|`pinch`|`boolean`|`true`|If true, series scaling with pinch/zoom gestures (this option is supported on touch devices) is enabled|
-
-You can also set `handleScale` to `true` or `false` to enable or disable all the above options.
+See [HandleScaleOptions](/api/interfaces/HandleScaleOptions).
 
 ## Axis scaling options
 
-|Name                        |Type   |Default  |Description|
-|----------------------------|-------|---------|-|
-|`time`|`boolean`|`true`|If true, time axis scaling with left mouse button pressed is allowed|
-|`price`|`boolean`|`true`|If true, price axis scaling with left mouse button pressed is allowed|
-
-You can also set `axisPressedMouseMove` to `true` or `false` to enable or disable all the above options.
+See [AxisPressedMouseMoveOptions](/api/interfaces/AxisPressedMouseMoveOptions).
 
-### An example of a scrolling/scaling customization
+## An example of a scrolling/scaling customization
 
 ```js
 chart.applyOptions({
@@ -384,7 +319,3 @@ chart.applyOptions({
     handleScale: false,
 });
 ```
-
-## Next reading
-
-- [Time Scale](./time-scale.md)
diff --git a/website/docs/data/_category_.yml b/website/docs/data/_category_.yml
new file mode 100644
index 0000000000..2550ed7dbd
--- /dev/null
+++ b/website/docs/data/_category_.yml
@@ -0,0 +1,2 @@
+label: "Data"
+position: 1
\ No newline at end of file
diff --git a/docs/ohlc.md b/website/docs/data/ohlc.md
similarity index 91%
rename from docs/ohlc.md
rename to website/docs/data/ohlc.md
index fed5665db2..64b91cf8de 100644
--- a/docs/ohlc.md
+++ b/website/docs/data/ohlc.md
@@ -1,4 +1,8 @@
-# OHLC
+---
+sidebar_position: 0
+---
+
+# OHLC Data
 
 OHLC is a type of data item. It includes the following fields:
 
diff --git a/docs/time.md b/website/docs/data/time.md
similarity index 97%
rename from docs/time.md
rename to website/docs/data/time.md
index 0ddf1258ff..5d8ed53845 100644
--- a/docs/time.md
+++ b/website/docs/data/time.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+---
+
 # Time
 
 This article contains descriptions of types to represent the time of data items.
diff --git a/docs/whitespace-data.md b/website/docs/data/whitespace-data.md
similarity index 96%
rename from docs/whitespace-data.md
rename to website/docs/data/whitespace-data.md
index 8c7b8ee746..a5a40e5692 100644
--- a/docs/whitespace-data.md
+++ b/website/docs/data/whitespace-data.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # Whitespace Data
 
 A whitespace - an empty space on the chart, which extends timescale, but doesn't have a value for the series.
diff --git a/website/docs/events.md b/website/docs/events.md
new file mode 100644
index 0000000000..23492acdf4
--- /dev/null
+++ b/website/docs/events.md
@@ -0,0 +1,51 @@
+---
+sidebar_position: 5
+---
+
+# Events
+
+Event subscriptions can notify you of such chart/user interactions as mouse clicks/moving of mouse cursor and changes of the chart visible time range.
+
+## Click
+
+See [subscribeClick](/api/interfaces/IChartApi#subscribeclick) and [unsubscribeClick](/api/interfaces/IChartApi#unsubscribeclick).
+
+Example:
+
+```js
+function handleClick(param) {
+    if (!param.point) {
+        return;
+    }
+
+    console.log(`An user clicks at (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
+}
+
+chart.subscribeClick(handleClick);
+
+// ... after some time
+
+chart.unsubscribeClick(handleClick);
+```
+
+## Crosshair move
+
+See [subscribeCrosshairMove](/api/interfaces/IChartApi#subscribecrosshairmove) and [unsubscribeCrosshairMove](/api/interfaces/IChartApi#unsubscribecrosshairmove).
+
+Example:
+
+```js
+function handleCrosshairMoved(param) {
+    if (!param.point) {
+        return;
+    }
+
+    console.log(`A user moved the crosshair to (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`);
+}
+
+chart.subscribeCrosshairMove(handleCrosshairMoved);
+
+// ... after some time
+
+chart.unsubscribeCrosshairMove(handleCrosshairMoved);
+```
diff --git a/docs/README.md b/website/docs/intro.md
similarity index 94%
rename from docs/README.md
rename to website/docs/intro.md
index 306a04d6f1..1855e09d17 100644
--- a/docs/README.md
+++ b/website/docs/intro.md
@@ -1,3 +1,9 @@
+---
+slug: /
+id: intro
+sidebar_position: 0
+---
+
 # Getting started
 
 ## Installation
@@ -70,10 +76,3 @@ lineSeries.setData([
     [JSFiddle](https://jsfiddle.net/TradingView/gemn0ud6/)
 
 That's it! Your first chart is ready and we can now proceed.
-
-## What's next
-
-- [Series basics](./series-basics.md)
-- [Customization](./customization.md)
-- [Time Scale](./time-scale.md)
-- [Time zones support](./time-zones.md)
diff --git a/docs/price-scale.md b/website/docs/price-scale.md
similarity index 98%
rename from docs/price-scale.md
rename to website/docs/price-scale.md
index 6b7654a314..7f7f3b253a 100644
--- a/docs/price-scale.md
+++ b/website/docs/price-scale.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+---
+
 # Price Scale
 
 Price Scale is an object that maps prices to coordinates and vice versa.
diff --git a/website/docs/series/_category_.yml b/website/docs/series/_category_.yml
new file mode 100644
index 0000000000..23cca5c7ee
--- /dev/null
+++ b/website/docs/series/_category_.yml
@@ -0,0 +1,2 @@
+label: "Series"
+position: 2
\ No newline at end of file
diff --git a/docs/area-series.md b/website/docs/series/area-series.md
similarity index 61%
rename from docs/area-series.md
rename to website/docs/series/area-series.md
index bd59b95628..119406f080 100644
--- a/docs/area-series.md
+++ b/website/docs/series/area-series.md
@@ -1,10 +1,10 @@
-# Area series
+# Area Series
 
 An area chart is another way of displaying quantitative data. It's basically a colored area between the line connecting all data points and the time scale.
 
 An area series has a crosshair marker - a round mark which is moving along the series' line while the cursor is moving on a chart along the time scale.
 
-![Area chart example](./assets/area-series.png "Area chart example")
+![Area chart example](/img/area-series.png "Area chart example")
 
 ## How to create area series
 
@@ -28,9 +28,9 @@ areaSeries.setData([
 
 ## Data format
 
-Each area series item should be a [whitespace](./whitespace-data.md) item or an object with the following fields:
+Each area series item should be a [whitespace](../data/whitespace-data.md) item or an object with the following fields:
 
-- `time` ([Time](./time.md)) - item time
+- `time` ([Time](/api/#time)) - item time
 - `value` (`number`) - item value
 
 ## Customization
@@ -42,20 +42,7 @@ These colors blend into one another in the middle of the area.
 
 Also, the crosshair marker, which is enabled by default, can either be disabled or have its radius adjusted.
 
-An area series interface can be customized using the following set of options:
-
-|Name|Type|Default|Description|
-|----|----|-------|-----------|
-|`topColor`|`string`|`rgba(46, 220, 135, 0.4)`|Area top color|
-|`bottomColor`|`string`|`rgba(40, 221, 100, 0)`|Area bottom color|
-|`lineColor`|`string`|`#33D778`|Line color|
-|`lineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Line style|
-|`lineWidth`|`number`|`3`|Line width in pixels|
-|`crosshairMarkerVisible`|`boolean`|`true`|If true, the crosshair marker is shown|
-|`crosshairMarkerRadius`|`number`|`4`|The radius of the crosshair marker in pixels|
-|`crosshairMarkerBorderColor`|`string`|`''`|The crosshair border color (an empty string fallbacks the color to series' color under the crosshair)|
-|`crosshairMarkerBackgroundColor`|`string`|`''`|The crosshair back color (an empty string fallbacks the color to series' color under the crosshair)|
-|`lastPriceAnimation`|[LastPriceAnimationMode](./constants.md#lastpriceanimationmode)|`'LastPriceAnimationMode.Disabled'`|The mode of the last price animation|
+An area series interface can be customized using the following set of options: [AreaStyleOptions](/api/interfaces/AreaStyleOptions).
 
 ### Examples
 
@@ -85,9 +72,3 @@ An area series interface can be customized using the following set of options:
         lineWidth: 1,
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [Constants](./constants.md)
-- [Time](./time.md)
diff --git a/docs/bar-series.md b/website/docs/series/bar-series.md
similarity index 78%
rename from docs/bar-series.md
rename to website/docs/series/bar-series.md
index c60d6cf7ba..1ea86f3855 100644
--- a/docs/bar-series.md
+++ b/website/docs/series/bar-series.md
@@ -1,4 +1,4 @@
-# Bar series
+# Bar Series
 
 A bar chart shows price movements in the form of bars.
 
@@ -6,7 +6,7 @@ Vertical line length of a bar is limited by the highest and lowest price values.
 
 Open & Close values are represented by tick marks, on the left & right hand side of the bar respectively.
 
-![Bar chart example](./assets/bar-series.png "Bar chart example")
+![Bar chart example](/img/bar-series.png "Bar chart example")
 
 ## How to create bar series
 
@@ -35,7 +35,7 @@ barSeries.setData([
 
 ## Data format
 
-Each item of the bar series is either an [OHLC](./ohlc.md) or a [whitespace](./whitespace-data.md) item.
+Each item of the bar series is either an [OHLC](../data/ohlc.md) or a [whitespace](../data/whitespace-data.md) item.
 
 ## Customization
 
@@ -44,14 +44,7 @@ Bar width can be increased to 2 px by disabling the `thinBars` option.
 
 Colors for rising & falling bars have to be set separately.
 
-A bar series series interface can be customized using the following set of options:
-
-|Name|Type|Default|Description|
-|----|----|-------|-----------|
-|`thinBars`|`boolean`|`true`|If true, bars are represented as sticks|
-|`upColor`|`string`|`#26a69a`|Growing bar color|
-|`downColor`|`string`|`#ef5350`|Falling bar color|
-|`openVisible`|`boolean`|`true`|If true, then the open line of a bar is shown|
+A bar series series interface can be customized using the following set of options: [BarStyleOptions](/api/interfaces/BarStyleOptions).
 
 ### Examples
 
@@ -75,9 +68,3 @@ A bar series series interface can be customized using the following set of optio
         openVisible: false,
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [OHLC](./ohlc.md)
-- [Time](./time.md)
diff --git a/docs/baseline-series.md b/website/docs/series/baseline-series.md
similarity index 56%
rename from docs/baseline-series.md
rename to website/docs/series/baseline-series.md
index a53896ab03..21237137d1 100644
--- a/docs/baseline-series.md
+++ b/website/docs/series/baseline-series.md
@@ -4,7 +4,7 @@ A baseline chart is another way of displaying quantitative data. It's basically
 
 A baseline series has a crosshair marker - a round mark which is moving along the series' line while the cursor is moving on a chart along the time scale.
 
-![Baseline chart example](./assets/baseline-series.png)"Baseline chart example")
+![Baseline chart example](/img/baseline-series.png)
 
 ## How to create baseline series
 
@@ -33,9 +33,9 @@ baselineSeries.setData([
 
 ## Data format
 
-Each area series item should be a [whitespace](./whitespace-data.md) item or an object with the following fields:
+Each area series item should be a [whitespace](../data/whitespace-data.md) item or an object with the following fields:
 
-- `time` ([Time](./time.md)) - item time
+- `time` ([Time](../data/time.md)) - item time
 - `value` (`number`) - item value
 
 ## Customization
@@ -45,24 +45,7 @@ These colors blend into one another in the middle of the area.
 
 Also, the crosshair marker, which is enabled by default, can either be disabled or have its radius adjusted.
 
-A baseline series interface can be customized using the following set of options:
-
-|Name|Type|Default|Description|
-|-|----|-------|-|
-|`baseValue`|`BaseValueType`|`{type: 'price', price: 0}`|Base value of the series|
-|`topFillColor1`|`string`|`rgba(38, 166, 154, 0.28)`|The first color of the top area|
-|`topFillColor2`|`string`|`rgba(38, 166, 154, 0.05)`|The second color of the top area.|
-|`topLineColor`|`string`|`rgba(38, 166, 154, 1)`|The line color of the top area|
-|`bottomFillColor1`|`string`|`rgba(239, 83, 80, 0.05)`|The first color of the bottom area|
-|`bottomFillColor2`|`string`|`rgba(239, 83, 80, 0.28)`|The second color of the bottom area|
-|`bottomLineColor`|`string`|`rgba(239, 83, 80, 1)`|The line color of the bottom area|
-|`lineWidth`|`number`|`3`|Line width|
-|`lineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Line style|
-|`crosshairMarkerVisible`|`boolean`|`true`|Show the crosshair marker|
-|`crosshairMarkerRadius`|`number`|`4`|Crosshair marker radius in pixels|
-|`crosshairMarkerBorderColor`|`string`|`''`|Crosshair marker border color. An empty string falls back to the the color of the series under the crosshair|
-|`crosshairMarkerBackgroundColor`|`string`|`''`|The crosshair marker background color. An empty string falls back to the the color of the series under the crosshair|
-|`lastPriceAnimation`|[LastPriceAnimationMode](./constants.md#lastpriceanimationmode)|`'LastPriceAnimationMode.Disabled'`|Last price animation mode|
+A baseline series interface can be customized using the following set of options: [BaselineStyleOptions](/api/interfaces/BaselineStyleOptions).
 
 ### Examples
 
@@ -93,9 +76,3 @@ A baseline series interface can be customized using the following set of options
         lineWidth: 1,
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [Constants](./constants.md)
-- [Time](./time.md)
diff --git a/docs/candlestick-series.md b/website/docs/series/candlestick-series.md
similarity index 67%
rename from docs/candlestick-series.md
rename to website/docs/series/candlestick-series.md
index fe09306dae..d97d913592 100644
--- a/docs/candlestick-series.md
+++ b/website/docs/series/candlestick-series.md
@@ -1,10 +1,10 @@
-# Candlestick series
+# Candlestick Series
 
 A candlestick chart shows price movements in the form of candlesticks.
 
 On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick's time interval.
 
-![Candlestick chart example](./assets/candlestick-series.png "Candlestick chart example")
+![Candlestick chart example](/img/candlestick-series.png "Candlestick chart example")
 
 ## How to create candlestick series
 
@@ -31,29 +31,17 @@ candlestickSeries.setData([
 
 ## Data format
 
-Each item of the candlestick series is either an [OHLC](./ohlc.md) or a [whitespace](./whitespace-data.md) item.
+Each item of the candlestick series is either an [OHLC](../data/ohlc.md) or a [whitespace](../data/whitespace-data.md) item.
 
 ## Customization
 
 Colors for rising and falling candlesticks have to be set separately.
 
-Candlestick borders and wicks are visible by default and may be disabled.
-Note that when wicks are disabled the candlestick doesn't show high and low price values.
-Border and wick color can be either set for all candlesticks at once or for rising and falling candlesticks separately. If the latter is your preference please make sure that you don't use common options such as `borderColor` and `wickColor` since they have higher priority compared to the specified ones.
-Candlestick series interface can be customized using the following set of options:
-
-|Name|Type|Default|Description|
-|----|----|-------|-----------|
-|`upColor`|`string`|`#26a69a`|Growing candles' color|
-|`downColor`|`string`|`#ef5350`|Falling candles' color|
-|`borderVisible`|`boolean`|`true`|If true, the borders of a candle are drawn|
-|`wickVisible`|`boolean`|`true`|If true, the high and low prices are shown as wicks of a candle|
-|`borderColor`|`string`|`#378658`|Border color of all candles in series|
-|`wickColor`|`string`|`#737375`|Wicks' color of all candles in series|
-|`borderUpColor`|`string`|`#26a69a`|Growing candle's border color.|
-|`borderDownColor`|`string`|`#ef5350`|Falling candle's border color.|
-|`wickUpColor`|`string`|`#26a69a`|Growing candle's wicks color.|
-|`wickDownColor`|`string`|`#ef5350`|Falling candle's wicks.|
+Candlestick borders and wicks are visible by default and may be disabled. Note that when wicks are disabled the candlestick doesn't show high and low price values.
+
+Border and wick color can be either set for all candlesticks at once or for rising and falling candlesticks separately. If the latter is your preference please make sure that you don't use common options such as `borderColor` and `wickColor` since they have higher priority compared to the specific ones.
+
+Candlestick series interface can be customized using the following set of options: [CandlestickStyleOptions](/api/interfaces/CandlestickStyleOptions).
 
 ### Examples
 
@@ -83,9 +71,3 @@ Candlestick series interface can be customized using the following set of option
         downColor: 'rgba(0, 255, 0, 1)',
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [OHLC](./ohlc.md)
-- [Time](./time.md)
diff --git a/docs/histogram-series.md b/website/docs/series/histogram-series.md
similarity index 75%
rename from docs/histogram-series.md
rename to website/docs/series/histogram-series.md
index d4a7681fdc..b53949cb03 100644
--- a/docs/histogram-series.md
+++ b/website/docs/series/histogram-series.md
@@ -1,10 +1,10 @@
-# Histogram series
+# Histogram Series
 
 A histogram series is a graphical representation of the value distribution.
 
 Histogram creates intervals (columns) and counts how many values fall into each column.
 
-![Histogram example](./assets/histogram-series.png "Histogram chart example")
+![Histogram example](/img/histogram-series.png "Histogram chart example")
 
 ## How to create histogram series
 
@@ -32,9 +32,9 @@ histogramSeries.setData([
 
 ## Data format
 
-Each item of the histogram series should be a [whitespace](./whitespace-data.md) item or an object with the following fields:
+Each item of the histogram series should be a [whitespace](../data/whitespace-data.md) item or an object with the following fields:
 
-- `time` ([Time](./time.md)) - item time
+- `time` ([Time](/api/#time)) - item time
 - `value` (`number`) - item value
 - `color` (`string`, optional) - optional color of an item
 
@@ -42,12 +42,7 @@ Note: if `color` is not set then an item will be colored according to series opt
 
 ## Customization
 
-A histogram series interface can be customized using the following options:
-
-|Name|Type|Default|Description|
-|----|----|-------|-|
-|`color`|`string`|`#26a69a`|Column color|
-|`base`|`number`|`0`|Defines initial level for histogram columns|
+A histogram series interface can be customized using the following options: [HistogramStyleOptions](/api/interfaces/HistogramStyleOptions).
 
 ### Examples
 
@@ -68,9 +63,3 @@ A histogram series interface can be customized using the following options:
         base: -10,
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [Constants](./constants.md)
-- [Time](./time.md)
diff --git a/docs/line-series.md b/website/docs/series/line-series.md
similarity index 60%
rename from docs/line-series.md
rename to website/docs/series/line-series.md
index 59fa2c3c7c..40918bf8be 100644
--- a/docs/line-series.md
+++ b/website/docs/series/line-series.md
@@ -1,10 +1,10 @@
-# Line
+# Line Series
 
 A line chart is a type of chart that displays information as series of the data points connected by straight line segments.
 
 Line series has a crosshair marker - a round mark which is moving along the series' line while the cursor is moving along the time scale.
 
-![Line chart example](./assets/line-series.png "Line chart example")
+![Line chart example](/img/line-series.png "Line chart example")
 
 ## How to create line series
 
@@ -31,9 +31,9 @@ lineSeries.setData([
 
 ## Data format
 
-Each item of the line series should be a [whitespace](./whitespace-data.md) item or an object with the following fields:
+Each item of the line series should be a [whitespace](../data/whitespace-data.md) item or an object with the following fields:
 
-- `time` ([Time](./time.md)) - a time of the item
+- `time` ([Time](/api/#time)) - a time of the item
 - `value` (`number`) - a value of the item
 
 ## Customization
@@ -42,19 +42,7 @@ A line itself can be customized by setting its color, width and style.
 
 Also, the crosshair marker which is enabled by default, can be either disabled or have its radius adjusted.
 
-A line series interface can be customized using the following options:
-
-|Name|Type|Default|Description|
-|----|----|-------|-----------|
-|`color`|`string`|`#2196f3`|Line color|
-|`lineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Line style|
-|`lineWidth`|`number`|`3`|Line width (in pixels)|
-|`crosshairMarkerVisible`|`boolean`|`true`|If `true`, the crosshair marker is shown on a chart|
-|`crosshairMarkerRadius`|`number`|`4`|Crosshair marker radius (in pixels)|
-|`crosshairMarkerBorderColor`|`string`|`''`|The crosshair border color (an empty string fallbacks the color to series' color under the crosshair)|
-|`crosshairMarkerBackgroundColor`|`string`|`''`|The crosshair back color (an empty string fallbacks the color to series' color under the crosshair)|
-|`lineType`|[LineType](./constants.md#linetype)|`LineType.Simple`|Line type|
-|`lastPriceAnimation`|[LastPriceAnimationMode](./constants.md#lastpriceanimationmode)|`'LastPriceAnimationMode.Disabled'`|The mode of the last price animation|
+A line series interface can be customized using the following options: [LineStyleOptions](/api/interfaces/LineStyleOptions).
 
 ### Examples
 
@@ -83,9 +71,3 @@ A line series interface can be customized using the following options:
         lineWidth: 3,
     });
     ```
-
-## What's next
-
-- [Customization](./customization.md)
-- [Constants](./constants.md)
-- [Time](./time.md)
diff --git a/docs/series-basics.md b/website/docs/series/series-basics.md
similarity index 92%
rename from docs/series-basics.md
rename to website/docs/series/series-basics.md
index 7038a943dc..1b32b2de4c 100644
--- a/docs/series-basics.md
+++ b/website/docs/series/series-basics.md
@@ -1,4 +1,8 @@
-# Series basics
+---
+sidebar_position: 0
+---
+
+# Series Basics
 
 Each series has a set of common properties and methods regardless of its type.
 
@@ -250,10 +254,10 @@ You can set the width, style and color of this line or disable it using the foll
 |Name|Type|Default|Description|
 |----|----|-------|-|
 |`priceLineVisible`|`boolean`|`true`|If true, the series' price line is displayed on a chart if the series is visible|
-|`priceLineSource`|[PriceLineSource](./constants.md#pricelinesource)|`PriceLineSource.LastBar`|Source to be used for the horizontal price line|
+|`priceLineSource`|[PriceLineSource](../api/enums/PriceLineSource)|`PriceLineSource.LastBar`|Source to be used for the horizontal price line|
 |`priceLineWidth`|`number`|`1`|Price line's width in pixels|
 |`priceLineColor`|`string`|`''`|Price line's color|
-|`priceLineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Dotted`|Price line's style|
+|`priceLineStyle`|[LineStyle](../api/enums/LineStyle)|`LineStyle.Dotted`|Price line's style|
 
 Example:
 
@@ -293,7 +297,7 @@ You can set the width, style and color of this line or disable it using the foll
 |`baseLineVisible`|`boolean`|`true`|If true, the series' base line is displayed on a chart if the series is visible|
 |`baseLineWidth`|`number`|`1`|Base line's width in pixels|
 |`baseLineColor`|`string`|`'#B2B5BE'`|Base line's color|
-|`baseLineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Base line's style|
+|`baseLineStyle`|[LineStyle](../api/enums/LineStyle)|`LineStyle.Solid`|Base line's style|
 
 Example:
 
@@ -399,7 +403,7 @@ Allows to set/replace all existing series markers with new ones.
 
 An array of items is expected. An array must be sorted ascending by `time`. Each item should contain the following fields:
 
-- `time` ([Time](./time.md)) - item time
+- `time` ([Time](/api/#time)) - item time
 - `position` (`aboveBar` &#124; `belowBar` &#124; `inBar`) - item position
 - `shape` (`circle` &#124; `square` &#124; `arrowUp` &#124; `arrowDown`) - item marker type
 - `size` (`number` &#124; `undefined`) - size multiplier of the marker, the shape is hidden when set to `0`, default value is `1`
@@ -458,7 +462,7 @@ You can set the price level, width, style and color of this line using the follo
 |`price`| `number` | `0` | Price line's level |
 |`lineColor`|`string`|`''`|Price line's color|
 |`lineWidth`|`number`|`1`|Price line's width in pixels|
-|`lineStyle`|[LineStyle](./constants.md#linestyle)|`LineStyle.Solid`|Price line's style|
+|`lineStyle`|[LineStyle](../api/enums/LineStyle)|`LineStyle.Solid`|Price line's style|
 |`axisLabelVisible`|`boolean`|`true`|If true, a label with the current price value is displayed on the price scale|
 |`title`|`string`|`''`|Price line's title on the chart's pane|
 
@@ -497,12 +501,12 @@ series.removePriceLine(priceLine);
 
 ### barsInLogicalRange
 
-Returns bars information for the series in the provided [logical range](./time-scale.md#logical-range) or `null`, if no series data has been found in the requested range.
+Returns bars information for the series in the provided [logical range](../time-scale.md#logical-range) or `null`, if no series data has been found in the requested range.
 
 The returned value is an object with the following properties:
 
-- `from` - a [Time](./time.md) of the first series' bar inside of the passed logical range or `undefined`, if no bars have been found in the requested range
-- `to` - a [Time](./time.md) of the last series' bar inside of the passed logical range or `undefined`, if no bars have been found in the requested range
+- `from` - a [Time](/api/#time) of the first series' bar inside of the passed logical range or `undefined`, if no bars have been found in the requested range
+- `to` - a [Time](/api/#time) of the last series' bar inside of the passed logical range or `undefined`, if no bars have been found in the requested range
 - `barsBefore` - a number of bars between the `from` index of the passed logical range and the first series' bar
 - `barsAfter` - a number of bars between the `to` index of the passed logical range and the last series' bar
 
@@ -519,7 +523,7 @@ console.log(barsInfo);
 ```
 
 This method can be used, for instance, to implement downloading historical data while scrolling to prevent a user from seeing empty space.
-Thus, you can subscribe to [visible logical range changed event](./time-scale.md#subscribeVisibleLogicalRangeChange), get count of bars in front of the visible range and load additional data if it is needed:
+Thus, you can subscribe to [visible logical range changed event](/api/interfaces/ITimeScaleApi#subscribeVisibleLogicalRangeChange), get count of bars in front of the visible range and load additional data if it is needed:
 
 ```js
 function onVisibleLogicalRangeChanged(newVisibleLogicalRange) {
@@ -579,13 +583,3 @@ This function accepts coordinate and returns corresponding price value or `null`
 ```js
 const price = series.coordinateToPrice(324);
 ```
-
-## Next reading
-
-- [Area series](./area-series.md)
-- [Baseline series](./baseline-series.md)
-- [Bar series](./bar-series.md)
-- [Candlestick series](./candlestick-series.md)
-- [Histogram series](./histogram-series.md)
-- [Line series](./line-series.md)
-- [Customization](./customization.md)
diff --git a/website/docs/time-scale.md b/website/docs/time-scale.md
new file mode 100644
index 0000000000..33dd6a72ff
--- /dev/null
+++ b/website/docs/time-scale.md
@@ -0,0 +1,61 @@
+---
+sidebar_position: 4
+---
+
+# Time Scale
+
+Time scale (or time axis) is a horizontal scale at the bottom of the chart that displays the time of bars.
+
+## Time scale options
+
+See [TimeScaleOptions](/api/interfaces/TimeScaleOptions).
+
+### Tick marks formatter
+
+Tick marks formatter can be used to customize tick marks labels on the time axis.
+
+To customize it, you need to provide the [`tickMarkFormatter` option](/api/#tickmarkformatter).
+
+Where `time` is [Time](/api/#time) object, `type` is [TickMarkType](./api/enums/TickMarkType) enum and `locale` is the currently applied locale of the string type.
+
+This function should return `time` as a string formatted according to `tickMarkType` type (year, month, etc) and `locale`.
+
+Note that the returned string should be the shortest possible value and should have no more than 8 characters. Otherwise, the tick marks will overlap each other.
+
+### Example of time scale customization
+
+```js
+chart.applyOptions({
+    timeScale: {
+        rightOffset: 12,
+        barSpacing: 3,
+        fixLeftEdge: true,
+        lockVisibleTimeRangeOnResize: true,
+        rightBarStaysOnScroll: true,
+        borderVisible: false,
+        borderColor: '#fff000',
+        visible: true,
+        timeVisible: true,
+        secondsVisible: false,
+        tickMarkFormatter: (time, tickMarkType, locale) => {
+            console.log(time, tickMarkType, locale);
+            const year = LightweightCharts.isBusinessDay(time) ? time.year : new Date(time * 1000).getUTCFullYear();
+            return String(year);
+        },
+    },
+});
+```
+
+## Time scale API
+
+See [ITimeScaleApi](/api/interfaces/ITimeScaleApi).
+
+## Logical range
+
+![Logical range](/img/logical-range.png "Logical range")
+
+Red vertical lines here are borders between bars.
+
+Thus, the visible logical range in the image above is from -4.73 to 5.05.
+
+See also [LogicalRange](/api/#logicalrange).
diff --git a/docs/time-zones.md b/website/docs/time-zones.md
similarity index 97%
rename from docs/time-zones.md
rename to website/docs/time-zones.md
index 6c8d1b2ae3..429d4e14ba 100644
--- a/docs/time-zones.md
+++ b/website/docs/time-zones.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 7
+---
 # Working with time zones
 
 This doc describes what do you need to do if you want to add time zone support to your chart.
@@ -107,5 +110,5 @@ Keep in mind that time zones feature is not an issue for everybody so this is up
 
 ## Note about converting business days
 
-If you're using a business day for your time (either [object](./time.md#business-day-object) or [string](./time.md#business-day-string) representation), for example because of DWM nature of your data,
+If you're using a business day for your time (either [object](./data/time.md#business-day-object) or [string](./data/time.md#business-day-string) representation), for example because of DWM nature of your data,
 most likely you **shouldn't** convert that time to a zoned one, because this time represents a day.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
new file mode 100644
index 0000000000..1d69f87086
--- /dev/null
+++ b/website/docusaurus.config.js
@@ -0,0 +1,134 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+const organizationName = process.env.GITHUB_ORGANIZATION_NAME || 'tradingview';
+const projectName = 'lightweight-charts';
+const projectUrl = `https://github.com/${organizationName}/${projectName}`;
+const githubPagesUrl = `https://${organizationName}.github.io/`;
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+	title: 'Lightweight Charts',
+	tagline: 'Small and fast financial charts',
+	onBrokenLinks: 'throw',
+	onBrokenMarkdownLinks: 'warn',
+	favicon: '/favicon.ico',
+	noIndex: true,
+	url: githubPagesUrl,
+	baseUrl: `/${projectName}/`,
+	organizationName,
+	projectName: 'lightweight-charts',
+
+	presets: [
+		[
+			'@docusaurus/preset-classic',
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve('./sidebars.js'),
+					routeBasePath: '/',
+				},
+				theme: {
+					customCss: require.resolve('./src/css/custom.css'),
+				},
+			}),
+		],
+	],
+
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			navbar: {
+				title: 'Lightweight Charts',
+				logo: {
+					alt: 'Lightweight Charts Logo',
+					src: 'https://github.com/tradingview/lightweight-charts/raw/master/.github/logo.svg?sanitize=true',
+				},
+				items: [
+					{
+						type: 'doc',
+						docId: 'intro',
+						position: 'left',
+						label: 'Getting Started',
+					},
+					{
+						type: 'doc',
+						docId: 'api/index',
+						position: 'left',
+						label: 'API Reference',
+					},
+					{
+						href: projectUrl,
+						label: 'GitHub',
+						position: 'right',
+					},
+				],
+			},
+			footer: {
+				style: 'dark',
+				links: [
+					{
+						title: 'Docs',
+						items: [
+							{
+								label: 'Getting Started',
+								to: '/',
+							},
+							{
+								label: 'API Reference',
+								to: 'api/',
+							},
+						],
+					},
+					{
+						title: 'Community',
+						items: [
+							{
+								label: 'Stack Overflow',
+								href: 'https://stackoverflow.com/questions/tagged/lightweight-charts',
+							},
+							{
+								label: 'Discord',
+								href: 'https://discord.gg/E6UthXZ',
+							},
+							{
+								label: 'Twitter',
+								href: 'https://twitter.com/tradingview',
+							},
+						],
+					},
+					{
+						title: 'More',
+						items: [
+							{
+								label: 'GitHub',
+								href: projectUrl,
+							},
+						],
+					},
+				],
+				copyright: `Copyright © ${new Date().getFullYear()} TradingView, Inc. Built with Docusaurus.`,
+			},
+			prism: {
+				theme: lightCodeTheme,
+				darkTheme: darkCodeTheme,
+			},
+		}),
+
+	plugins: [
+		[
+			'docusaurus-plugin-typedoc',
+			/** @type {Partial<import('docusaurus-plugin-typedoc/dist/types').PluginOptions> & import('typedoc/dist/index').TypeDocOptions} */
+			({
+				entryPoints: ['../dist/typings.d.ts'],
+				readme: 'none',
+				disableSources: true,
+			}),
+		],
+	],
+};
+
+module.exports = config;
diff --git a/website/package.json b/website/package.json
new file mode 100644
index 0000000000..d7ee4cfaf8
--- /dev/null
+++ b/website/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
+    "@docusaurus/preset-classic": "2.0.0-beta.9",
+    "@mdx-js/react": "~1.6.21",
+    "@svgr/webpack": "~5.5.0",
+    "clsx": "~1.1.1",
+    "docusaurus-plugin-typedoc": "~0.16.3",
+    "file-loader": "~6.2.0",
+    "prism-react-renderer": "~1.2.1",
+    "react": "~17.0.1",
+    "react-dom": "~17.0.1",
+    "typedoc": "~0.22.7",
+    "typedoc-plugin-markdown": "~3.11.3",
+    "url-loader": "~4.1.1"
+  }
+}
diff --git a/website/sidebars.js b/website/sidebars.js
new file mode 100644
index 0000000000..ad5aa3a844
--- /dev/null
+++ b/website/sidebars.js
@@ -0,0 +1,31 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
+
+	// But you can create a sidebar manually
+	/*
+	tutorialSidebar: [
+		{
+			type: 'category',
+			label: 'Tutorial',
+			items: ['hello'],
+		},
+	],
+	 */
+};
+
+module.exports = sidebars;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
new file mode 100644
index 0000000000..d9e00928c7
--- /dev/null
+++ b/website/src/css/custom.css
@@ -0,0 +1,28 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2962FF;
+  --ifm-color-primary-dark: #1E53E5;
+  --ifm-color-primary-darker: #1848CC;
+  --ifm-color-primary-darkest: #143EB3;
+  --ifm-color-primary-light: #3179F5;
+  --ifm-color-primary-lighter: #5B9CF6;
+  --ifm-color-primary-lightest: #90BFF9;
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
diff --git a/website/static/.nojekyll b/website/static/.nojekyll
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/website/static/favicon.ico b/website/static/favicon.ico
new file mode 100644
index 0000000000..fa3257b9e2
Binary files /dev/null and b/website/static/favicon.ico differ
diff --git a/docs/assets/area-series.png b/website/static/img/area-series.png
similarity index 100%
rename from docs/assets/area-series.png
rename to website/static/img/area-series.png
diff --git a/docs/assets/bar-series.png b/website/static/img/bar-series.png
similarity index 100%
rename from docs/assets/bar-series.png
rename to website/static/img/bar-series.png
diff --git a/docs/assets/baseline-series.png b/website/static/img/baseline-series.png
similarity index 100%
rename from docs/assets/baseline-series.png
rename to website/static/img/baseline-series.png
diff --git a/docs/assets/candlestick-series.png b/website/static/img/candlestick-series.png
similarity index 100%
rename from docs/assets/candlestick-series.png
rename to website/static/img/candlestick-series.png
diff --git a/docs/assets/histogram-series.png b/website/static/img/histogram-series.png
similarity index 100%
rename from docs/assets/histogram-series.png
rename to website/static/img/histogram-series.png
diff --git a/docs/assets/line-series.png b/website/static/img/line-series.png
similarity index 100%
rename from docs/assets/line-series.png
rename to website/static/img/line-series.png
diff --git a/docs/assets/logical-range.png b/website/static/img/logical-range.png
similarity index 100%
rename from docs/assets/logical-range.png
rename to website/static/img/logical-range.png
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 0000000000..0c718e18f8
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,5 @@
+{
+	"files": [
+		"../dist/typings.d.ts"
+	]
+}