blocks logoBlocksv0.0.79

Getting started

While Blocks is in alpha, the recommended way to get started is to use the demo.

Try the demo

If you're a pioneering type and want to experiment with the editor in other projects you can continue on:

Installation

Install the library and its peer dependencies:

yarn add blocks-ui @mdx-js/react @blocks/react
npm i blocks-ui @mdx-js/react @blocks/react

Usage

You can use the block editor with the built-in blocks by only passing a JSX source string:

import React from 'react'
import Editor from 'blocks-ui'
const JSX = `
import React from 'react'
import { HeaderBasic } from '@blocks/react'
export default () => (
<Blocks.Root>
<HeaderBasic>
<HeaderBasic.Logo to="/">Hello</HeaderBasic.Logo>
<HeaderBasic.Nav>
<HeaderBasic.Link to="/about">About</HeaderBasic.Link>
<HeaderBasic.Link to="/blog">Blog</HeaderBasic.Link>
<HeaderBasic.Link to="/contact">Contact</HeaderBasic.Link>
</HeaderBasic.Nav>
</HeaderBasic>
</Blocks.Root>
)
`
export default () => <Editor src={JSX} />
blocks logo