diff --git a/docs/getting-started.md b/docs/getting-started.md
index c38436b..88a1d61 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -5,7 +5,9 @@ slug: /
Gosling.js is a declarative grammar for interactive (epi)genomics visualization on the Web.
-To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), go through the [grammar guide](category/grammar-guide), and start building your own Gosling visualizations using the the [grammar reference](reference) and [Javascript API](js-api) parts of the documentation as a reference.
+To get started with Gosling, we recommend going through the [Create Single Track Visualization Tutorial](/tutorials). Then, you can explore examples in the [online editor](https://gosling.js.org), go through the [grammar guide](category/grammar-guide), and start building your own Gosling visualizations using the the [grammar reference](reference) and [Javascript API](js-api) documentation.
+
+Please see [usage guide](usage) to learn about all the contexts in which Gosling can be used.
## What is a grammar for data visualization?
Words are combined together into sentences based on their parts of speech and grammar rules. In a similar way, visual components (such as a coordinate axis, plot markers, and legend) have specific roles and are combined according to certain rules. You probably know these rules without realizing it! These roles and rules have been made explicit such as in the [Grammar of Graphics](https://link.springer.com/book/10.1007/0-387-28695-0).
diff --git a/docs/usage.md b/docs/usage.md
new file mode 100644
index 0000000..3d27e20
--- /dev/null
+++ b/docs/usage.md
@@ -0,0 +1,108 @@
+---
+title: Usage
+---
+
+# Usage
+
+Gosling can be used and deployed in a variety of contexts.
+
+- In the [online editor](#online-editor)
+- In Python using [Gos](https://gosling-lang.github.io/gos/)
+- In a [HTML page](#html)
+- In a [React application](#react)
+
+## Online Editor
+
+You can visit the [online editor](https://gosling.js.org) to start trying Gosling immediately.
+
+### Load a Gosling Spec From Your Github Gist
+
+1. To load a spec you first have to create a gist with a file named gosling.js\* that specifies the spec.
+1. You can additionally specify a `readme.md` file to describe your spec.
+1. Also be sure to give your gist a fabulous title. It'll be shown in the gosling editor.
+ You can then open your visualization at http:///?gist=/.
+
+ For example, https://gosling.js.org/?gist=wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3
+
+## HTML
+
+Gosling can be embedded directly into your HTML page by adding gosling.js and several other dependencies in script tags.
+
+```html
+
+
+
+ Gosling Visualization
+
+
+
+
+
+
+
+
+```
+
+## React
+
+Beginning with version 0.9.30, Gosling now supports React v18 (You can still use React v16 or v17).
+If you are using a Gosling version prior to 0.9.30, please continue to use React v16.
+
+Install `gosling.js` and its dependent libraries:
+
+```sh
+yarn add gosling.js higlass pixi.js react@18 react-dom@18
+```
+
+Add the following stylesheet to your base `html` file:
+
+```html
+
+
+
+```
+
+Use the Gosling.js' react component to visualize your data:
+
+```js
+import { GoslingComponent } from "gosling.js";
+function App() {
+ return ;
+}
+```
+
+Please visit [gosling-react](https://github.com/gosling-lang/gosling-react) to find detailed instruction on using React.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index d6b5803..694b477 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -45,7 +45,6 @@ module.exports = {
position: 'left',
},
{ to: 'tutorials/', label: 'Tutorials', position: 'left' },
- { to: 'usage/', label: 'Usage', position: 'left' },
{ to: 'examples/', label: 'Examples', position: 'left' },
{ to: 'themes/', label: 'Themes', position: 'left' },
{ to: 'about/', label: 'About', position: 'left' },
diff --git a/sidebarDocs.js b/sidebarDocs.js
index ffe0c72..924ca22 100644
--- a/sidebarDocs.js
+++ b/sidebarDocs.js
@@ -4,6 +4,10 @@ module.exports = {
type: 'doc',
id: 'getting-started',
},
+ {
+ type: 'doc',
+ id: 'usage'
+ },
{
type: 'category',
label: 'Grammar Guide',
diff --git a/src/pages/usage/index.md b/src/pages/usage/index.md
deleted file mode 100644
index cb5f21a..0000000
--- a/src/pages/usage/index.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Usage
----
-
-# Usage
-
-Gosling can be used and deployed in a variety of contexts.
-
-To build new visualizations, we recommend using the online editor or [Gos](https://gosling-lang.github.io/gos/) (if you prefer python). You can also create a sharable link to the online editor with your own Gosling specification.
-
-Gosling can be embedded into your own HTML or React applications.
-
-## Online Editor
-You can visit [Online Editor](https://gosling.js.org) to visualize your data directly in the website.
-
-### Load a Gosling Spec From Your Github Gist
-1. To load a spec you first have to create a gist with a file named gosling.js* that specifies the spec.
-1. You can additionally specify a `readme.md` file to describe your spec.
-1. Also be sure to give your gist a fabulous title. It'll be shown in the gosling editor.
-You can then open your visualization at http:///?gist=/.
-
-For example, https://gosling.js.org/?gist=wangqianwen0418/1cc79f00990806f07b379ae6a7c7b7b3
-
-## HTML
-
-Gosling can be embedded directly into your HTML page by adding gosling.js and several other dependencies in script tags.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## React
-
-Beginning with version 0.9.30, Gosling now supports React v18 (You can still use React v16 or v17).
-If you are using a Gosling version prior to 0.9.30, please continue to use React v16.
-
-Install `gosling.js` and its dependent libraries:
-
-```sh
-yarn add gosling.js higlass pixi.js react@16.13.1 react-dom@16.13.1
-```
-
-Add the following stylesheet to your base `html` file:
-```html
-
-
-
-```
-
-Use the Gosling.js' react component to visualize your data:
-
-```js
-import { GoslingComponent } from "gosling.js";
-function App() {
- return (
-
- );
-}
-```
-
-Please visit [gosling-react](https://github.com/gosling-lang/gosling-react) to find detailed instruction on using React.