Getting Started#

Welcome to the Dokz documentation! Dokz is a documentation site generator that compiles your markdown down to a static react site The markdown extension used is mdx, it has all the markdown features plus you can import, export and render react components 🔥

Dokz uses Next.js under the hood, check out Next.js if you never heard about it

Setup#

We recommend creating a new Dokz app using create-dokz-app, which sets up everything automatically for you. To create a project, run:

bash
1
npm init dokz-app
2
# or
3
yarn create dokz-app

After the installation is complete run npm run dev to start the development server. Try editing pages/index.mdx and see the result on your browser.

Manual Setup#

You can also install dokz in an existing nextjs application:

bash
1
npm install dokz @emotion/react @chakra-ui/react @emotion/styled framer-motion
2
# or
3
yarn add dokz @emotion/react @emotion/styled @chakra-ui/react framer-motion

Add the dokz provider to the main nextjs entry point

jsx
1
// _app.jsx
2
import { DokzProvider } from 'dokz'
3
import { ChakraProvider } from '@chakra-ui/react'
4
import React from 'react'
5
6
export default function App(props) {
7
    const { Component, pageProps } = props
8
    return (
9
        <ChakraProvider resetCSS>
10
            <DokzProvider headerLogo={<img src='/logo.svg' width='100px' />}>
11
                <Component {...pageProps} />
12
            </DokzProvider>
13
        </ChakraProvider>
14
    )
15
}

Add withDokz in the next.config.js file

js
1
const { withDokz } = require('dokz/dist/plugin')
2
3
module.exports = withDokz()

Create a new mdx document inside tha pages folder, for example index.mdx

md
1
# Heading
2
3
Ullamco ipsum id irure do occaecat minim. Cupidatat exercitation magna sit sunt aliqua voluptate excepteur amet dolor ea do. Consectetur veniam deserunt ullamco irure ullamco. Voluptate magna tempor elit voluptate velit enim dolor nulla sit fugiat exercitation. Anim deserunt Lorem aliquip cillum duis deserunt consequat sit culpa commodo.
4
5
> Node this is important
6
7
## Subjeading
8
9
Quis anim minim ullamco aliquip excepteur do pariatur eiusmod duis eu non. Duis deserunt Lorem nulla non duis voluptate dolore et. Do veniam mollit in do ad id enim anim dolore sint labore quis consequat.

To start developing your application execute npm run dev. This starts the development server on http://localhost:3000.

Visit http://localhost:3000 to view your application.