Getting started

Currently Genji can be used with VitePress and Docusaurus. There are plans to develop additional Genji themes and plugins for other SSGs in the future, such as Nextra, Rspress and more.

Try Genji online

You can try Genji directly in your browser on StackBlitz:

• VitePress
• Docusaurus

Genji in VitePress

In VitePress, Genji can be used via the custom theme: genji-theme-vitepress.

Installing VitePress from NPM

First, you should install VitePress and create a basic project following the instructions in the Getting Started section of the VitePress official guide.

Then install genji-theme-vitepress from NPM:

$ npm install genji-theme-vitepress -D

To consume genji-theme-vitpress, override the default Layout component from the chosen theme:

// .vitepress/theme/index.js
import DefaultTheme from "vitepress/theme";
import Layout from "genji-theme-vitepress";
import { h } from "vue";

// More props: https://genji-md.dev/reference/props
const props = {
  Theme: DefaultTheme,
};

export default {
  extends: DefaultTheme,
  Layout: () => h(Layout, props),
};

Genji also requires special VitePress config, extend it in the config:

// .vitepress/config.js
import config from "genji-theme-vitepress/config";

export default {
  extends: config,
};

With other Markdown plugins ^0.2.1

If you are working with other Markdown plugins, you should register Markdown plugin genjiAttrs explicitly:

// .vitepress/config.js
import { genjiAttrs } from "genji-theme-vitepress/config";
import otherMarkdownPlugin from "other-markdown-plugin";

export default {
  extends: config,
  markdown: {
    config: (md) => {
      md.use(otherMarkdownPlugin);
      md.use(genjiAttrs);
    },
  },
};

Then you can test with this example.

Genji in Docusaurus

In Docusaurus, Genji can be used via the custom theme: genji-theme-docusaurus.

Installing Docusaurus from NPM

First, you should install Docusaurus and create a basic project following the instructions in the Installation section of the VitePress official guide.

Then install genji-theme-docusaurus from NPM:

$ npm install genji-theme-docusaurus -D

After that register genji-theme-docusaurus in docusaurus.config.js via plugins option:

// docusaurus.config.js
const config = {
  // ...
  plugins: ["genji-theme-docusaurus"],
  // ...
};

And create a genji.config.js in the root directory to configure genji:

// genji.config.js
import { defineConfig } from "genji-theme-docusaurus/config";

// More props: https://genji-md.dev/reference/props
export default defineConfig({});

Then you can test with this example.

A quick example

If everything goes where, insert the following code snippet into one of your Markdown files.

```js eval code=false
size = Inputs.range([50, 300], { label: "size", value: 100, step: 1 });
```

```js eval
(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "orange";
  return div;
})();
```

This produces:

size = Inputs.range([50, 300], { label: "size", value: 100, step: 1 });

(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "orange";
  return div;
})();