Getting started
While Blocks is in alpha, the recommended way to get started is to use 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} />