Modern block styled editor
powered with React and ProseMirror
Easier to edit on touchscreen.

Get Started

Current Version : Ver.1.3.2

Output Result


Node.js package

Install the package via npm

$ npm install smartblock --save

Load JavaScript from CDN

<script src=""></script>


As an React

In your JavaScript file:

import * as React from 'react'; 
import { render } from 'react-dom'; 
import 'smartblock/css/smartblock.css';
import { SmartBlock, Extensions } from 'smartblock'; 

    html={'<h2>Hello World</h2><p>hello</p>'} 
    onChange={({ json, html }) => { console.log(json, html);}} 
  </>, document.getElementById("app")

As an Native JavaScript

<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<!-- You can use smartblock without using JSX -->
<!-- bundle size is much smaller than the package build with react !-->
SmartBlock.Editor('#app', {
  html: '<h2>Hello World</h2><p>hello</p>',
  extensions: SmartBlock.Extensions,
  onChange: function(result) {
    console.log(result.json, result.html);


IE11, and Edge, iOS Safari, Firefox, Chrome, Safari


Usage, introduction of other functions, component introduction etc.
are described in detail in the document.

Get Started

View on GitHub

SmartBlock was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page

If you like our project, we glad to have star! :)