diff --git a/README.md b/README.md
index 1f66a39..d7eb119 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,10 @@
-# jsonx_docs
+# jsonx_docs [➡️ jsonx.deno.dev ⬅️](https://jsonx.deno.dev/)
Documentation site of [FartLabs/jsonx](https://github.com/FartLabs/jsonx), a JSX
runtime for composing JSON data.
+[](https://jsonx.deno.dev/)
+
## Contribute
### Style
diff --git a/docs/01_getting_started/00_index.md b/docs/01_getting_started.md
similarity index 96%
rename from docs/01_getting_started/00_index.md
rename to docs/01_getting_started.md
index c191b42..0fb98f8 100644
--- a/docs/01_getting_started/00_index.md
+++ b/docs/01_getting_started.md
@@ -79,3 +79,5 @@ Resulting `data.json`:
]
}
```
+
+Learn more about [JSX](/jsx).
diff --git a/docs/02_playgrounds/02_manual.md b/docs/02_playgrounds/02_manual.md
index 9e0ef68..b6fbb86 100644
--- a/docs/02_playgrounds/02_manual.md
+++ b/docs/02_playgrounds/02_manual.md
@@ -12,34 +12,35 @@ learning jsonx.
## Use
+A playground is a programming environment where you can edit, transpile, and
+execute jsonx code.
+
To use a playground, let's take a look at the parts that make up one playground:
-code editor, version dropdown, play button, console, and share button.
+code editor, version dropdown, play button, share button, and console.
-> [!NOTE]
->
-> Screenshots of playground parts are coming soon.
+
### Code editor
The code editor is where you edit code. It is a TypeScript environment that
comes with batteries-included for editing jsonx code.
+
+
### Version dropdown
The version dropdown allows you to select the version of jsonx you want to use.
The default version is the latest stable version found on
[jsr.io](https://jsr.io).
+
+
### Play button
The play button transpiles and executes the code in the code editor. Output is
displayed in the provided console.
-### Console
-
-The console displays the output of the code executed in the code editor.
-
-The clear button clears the console.
+
### Share button
@@ -47,6 +48,16 @@ The share button generates a link to the playground and navigates the user to
the new link. The link is unlisted (not indexed by search engines) and can be
shared with others.
+
+
+### Console
+
+The console displays the output of the code executed in the code editor.
+
+The clear button clears the console.
+
+
+
## Recovery and disposal
> [!NOTE]
diff --git a/docs/03_jsx.md b/docs/03_jsx.md
new file mode 100644
index 0000000..67a9d4e
--- /dev/null
+++ b/docs/03_jsx.md
@@ -0,0 +1,186 @@
+---
+title: JSX
+---
+
+# JSX
+
+JSX is an XML-like syntax extension to ECMAScript that allows programmers to
+write HTML-like code in JavaScript. JSX code is transformed into standard
+JavaScript through transpilation.
+
+## Transpilation
+
+Here is some JSX code that renders a simple greeting message in HTML:
+
+```tsx
+function Greeting(props: { name: string }) {
+ return (
+
+
Hello, {props.name}!
+
+ );
+}
+
+const html = ;
+
+console.log(html);
+```
+
+Here's the same code transpiled to JavaScript:
+
+```js
+function Greeting(props) {
+ return h(DIV, null, h(H1, null, "Hello, ", props.name, "!"));
+}
+
+const html = h(Greeting, { name: "World" });
+
+console.log(html);
+```
+
+The JSX syntax is shorthand for calling the JSX runtime function `h` with the
+component, its props, and any children. `h` is conventionally used to represent
+the `createElement` function in [React](https://react.dev/),
+[Preact](https://preactjs.com/),
+[Vue](https://vuejs.org/guide/extras/render-function#jsx-tsx), and other JSX
+runtimes, but it can be configured to use any function via the `jsxFactory` and
+`jsxFragment` options in the TypeScript compiler options.
+
+## Syntax
+
+JSX syntax is similar to HTML, but it is not HTML. For example,
+[void elements](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
+like `![]()
` require a closing slash (`![]()
`), and all tags must be closed.
+
+JSX also supports dynamic expressions between `{` and `}`. This is how data is
+dynamically inserted into JSX elements.
+
+```tsx
+function PokemonLink(props: { pokedexNumber: number }) {
+ return (
+
+ Pokemon #{props.pokedexNumber}
+
+ );
+}
+```
+
+## Project setup
+
+### Deno
+
+Configuring JSX runtimes with Deno is easy peasy lemon squeezy! 🍋
+
+If the Deno toolchain is not already installed on your system,
+[install Deno](https://docs.deno.com/runtime/manual/getting_started/installation).
+Run [`deno upgrade`](https://docs.deno.com/runtime/manual/tools/upgrade) to
+ensure you have the latest version.
+
+Initialize a new Deno project with the
+[`deno init`](https://docs.deno.com/runtime/manual/tools/init) subcommand.
+
+#### Configuring one JSX runtime in Deno
+
+To configure a JSX runtime across your entire Deno project, edit your Deno
+configuration file's compiler options according to your JSX runtime of choice.
+
+For example, [Fresh](https://fresh.deno.dev/) (Deno's next-gen web framework),
+uses Preact as its JSX runtime and is configured as follows:
+
+```json
+{
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
+}
+```
+
+In this example, the `jsx` option is set to `"react-jsx"` which tells the
+compiler how to handle JSX syntax for Preact.
+
+The `jsxImportSource` option is set to `"preact"` which tells the compiler where
+to import the JSX runtime from e.g. the compiler will import its JSX runtime
+from `"preact/jsx-runtime"`. To make sure the compiler can find the JSX runtime,
+an import alias is assigned to a module that exports the JSX runtime. Since
+`https://esm.sh/preact/` exports the JSX runtime, the alias `preact/` is
+assigned to this module in your Deno configuration file:
+
+```json
+{
+ "imports": {
+ "preact/": "https://esm.sh/preact/"
+ }
+}
+```
+
+This is how a Fresh project is configured to use Preact as its JSX runtime in
+Deno!
+
+#### Configuring multiple JSX runtimes in Deno
+
+The Deno configuration file is only capable of configuring one JSX runtime at a
+time. If you need to use multiple JSX runtimes in your project, you can use the
+`--config` flag to specify a different configuration file for each runtime.
+
+Another available option is to override the `jsx` and `jsxImportSource` values
+in your project's Deno configuration file in each file that uses a different JSX
+runtime e.g.:
+
+```tsx
+/** @jsx react-jsx */
+/** @jsxImportSource @fartlabs/jsonx */
+```
+
+This alternative approach allows different JSX runtimes to be used in different
+files and is easier to manage than using multiple configuration files.
+
+## Q&A
+
+### What does JSX stand for?
+
+JSX stands for "JavaScript XML".
+
+### What is JSX known for?
+
+JSX is most commonly known for being a paradigm for writing web applications and
+is used by multiple popular libraries such as React and Preact to define and
+compose user interfaces at scale.
+
+React is downloaded over 100 million times per week and is the tool of choice
+behind many popular platforms such as Facebook and Instagram.
+
+### What is the difference between JSX and TSX?
+
+TSX refers to TypeScript code with JSX syntax. JSX files are often denoted by
+the file extension `.jsx` while TSX files are denoted by the file extension
+`.tsx`.
+
+It is recommended to use TSX files when writing JSX code in TypeScript projects.
+This is because TypeScript offers type checking that can help catch errors early
+in the development process.
+
+Learn more about [TypeScript](https://typescriptlang.org/).
+
+### Why do JSX components only use a single argument?
+
+JSX's constraint of limiting components to functions with a single object
+argument is a fundamental aspect of its composability.
+
+This argument, often referred to as "props", consolidates all the data a
+component needs into one place, simplifying how information is passed to
+components and how components are defined.
+
+In essence, JSX's single object argument constraint promotes a structured and
+predictable way to pass data between components, which is essential for building
+complex programs by composing smaller, reusable pieces.
+
+### Why does jsonx use JSX?
+
+JSX is leveraged by jsonx to provide a familiar and expressive way to define
+components. This allows developers to define complex structures in a more
+readable and maintainable way.
+
+Traditionally, JSX is associated with HTML and web development, but jsonx
+extends its use to define components for any problem domain that can be
+expressed in JavaScript/TypeScript and JSON.
diff --git a/docs/03_jsx/00_index.md b/docs/03_jsx/00_index.md
deleted file mode 100644
index 22510e0..0000000
--- a/docs/03_jsx/00_index.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: JSX
----
-
-# JSX
-
-> [!NOTE]
->
-> JSX definition coming soon.
-
-[Learn why jsonx uses JS](/jsx/theory.md).
-
-## Why does jsonx use JSX?
-
-> [!NOTE]
->
-> Coming soon.
-
-## JSX vs TSX
-
-> [!NOTE]
->
-> Difference between JSX and TSX coming soon.
-
-## Syntax
-
-> [!NOTE]
->
-> JSX syntax tutorial coming soon.
-
-## Project setup
-
-> [!NOTE]
->
-> JSX project setup using 1 or more JSX runtimes coming soon.
diff --git a/docs/03_jsx/01_theory.md b/docs/03_jsx/01_theory.md
deleted file mode 100644
index 1cf07b1..0000000
--- a/docs/03_jsx/01_theory.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Theory
----
-
-# Theory of JSX
-
-> [!NOTE]
->
-> Coming soon.
-
-## Why does jsonx use JSX?
-
-> [!NOTE]
->
-> Coming soon.
diff --git a/static/code-editor.png b/static/code-editor.png
new file mode 100644
index 0000000..83a9219
Binary files /dev/null and b/static/code-editor.png differ
diff --git a/static/console.png b/static/console.png
new file mode 100644
index 0000000..02f1057
Binary files /dev/null and b/static/console.png differ
diff --git a/static/play-button.png b/static/play-button.png
new file mode 100644
index 0000000..12ce769
Binary files /dev/null and b/static/play-button.png differ
diff --git a/static/playground.png b/static/playground.png
new file mode 100644
index 0000000..deac32f
Binary files /dev/null and b/static/playground.png differ
diff --git a/static/screenshot.png b/static/screenshot.png
new file mode 100644
index 0000000..a9fc565
Binary files /dev/null and b/static/screenshot.png differ
diff --git a/static/share-button.png b/static/share-button.png
new file mode 100644
index 0000000..04db330
Binary files /dev/null and b/static/share-button.png differ
diff --git a/static/version-dropdown.png b/static/version-dropdown.png
new file mode 100644
index 0000000..f197831
Binary files /dev/null and b/static/version-dropdown.png differ