{"id":13422171,"url":"https://github.com/appleple/smartblock","last_synced_at":"2025-05-15T16:07:28.831Z","repository":{"id":41147018,"uuid":"229175559","full_name":"appleple/smartblock","owner":"appleple","description":"intuitive block based wysiwyg editor built with React and ProseMirror","archived":false,"fork":false,"pushed_at":"2024-12-15T22:47:30.000Z","size":46971,"stargazers_count":317,"open_issues_count":16,"forks_count":27,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-09T10:18:31.963Z","etag":null,"topics":["editor","javascript","npm","prosemirror","react","smartphone","typescript","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://appleple.github.io/smartblock/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appleple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-20T02:32:43.000Z","updated_at":"2025-04-18T20:22:41.000Z","dependencies_parsed_at":"2024-01-25T05:09:36.340Z","dependency_job_id":"562149e4-d8e5-4b3c-9fd0-2642065b4dac","html_url":"https://github.com/appleple/smartblock","commit_stats":{"total_commits":588,"total_committers":5,"mean_commits":117.6,"dds":"0.16666666666666663","last_synced_commit":"7ef0d27f3ccf3f79c68528bdd57af9c0cd32d417"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fsmartblock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fsmartblock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fsmartblock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fsmartblock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleple","download_url":"https://codeload.github.com/appleple/smartblock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374475,"owners_count":22060611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","javascript","npm","prosemirror","react","smartphone","typescript","ui","ui-components"],"created_at":"2024-07-30T23:00:38.508Z","updated_at":"2025-05-15T16:07:27.784Z","avatar_url":"https://github.com/appleple.png","language":"TypeScript","readme":"# SmartBlock \n\n![](https://github.com/appleple/smartblock/workflows/Node%20CI/badge.svg)\n[![npm version](https://badge.fury.io/js/smartblock.svg)](https://badge.fury.io/js/smartblock)\n[![npm download](http://img.shields.io/npm/dm/smartblock.svg)](https://www.npmjs.com/package/smartblock)\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/smartblock/master/LICENSE)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Awesome%20block-based%20JavaScript%20%Editor\u0026url=https://github.com/appleple/smartblock\u0026via=appleplecom\u0026hashtags=blocks,smartblock)\n\n\n\nSmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with **SmartPhone**.\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE11 / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari | \n| --------- | --------- | --------- | --------- | --------- | \n\n## ScreenShot\n\n\u003cimg src=\"./screenshots/paragraph.png\" /\u003e\n\n## Features\n\n* Easy to use with SmartPhone\n* Fully customizable\n* Block based\n* Keep clean HTML and wipe out unnecessary tags\n* Get the result as **HTML** or **JSON**\n* copy and paste contents\n\n## Install\n\n```sh\n$ npm install smartblock --save\n```\n\n## Usage\n\n```js\nimport * as React from 'react';\nimport { render } from 'react-dom';\nimport 'smartblock/css/smartblock.css';\nimport { SmartBlock, Extensions } from 'smartblock';\n\nrender(\u003c\u003e\n \u003cSmartBlock \n extensions={Extensions}\n html={'\u003ch2\u003eHello World\u003c/h2\u003e\u003cp\u003ehello\u003c/p\u003e'}\n onChange={({ json, html }) =\u003e { console.log(json, html);}} \n /\u003e\n\u003c/\u003e, document.getElementById(\"app\"));\n```\n\n\n## Try it on CodeSandbox\n\n[![Edit hardcore-kalam-tghp9](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hardcore-kalam-tghp9?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n\n## Customize\n\nYou can add custom block like this\n\n```js\nimport * as React from 'react';\nimport { Extensions, CustomBlock, CustomMark } from 'smartblock';\nExtensions.push(new CustomBlock({ \n tagName: 'div',\n className: '.alert',\n icon: \u003cSomeIconComponent /\u003e\n});\n\nrender(\u003c\u003e\n \u003cSmartBlock \n extensions={Extensions}\n html={'\u003ch2\u003eHello World\u003c/h2\u003e\u003cp\u003ehello\u003c/p\u003e'}\n onChange={({ json, html }) =\u003e { console.log(json, html);}} \n /\u003e\n\u003c/\u003e, document.getElementById(\"app\"));\n```\n\nYou can add custom inline element like this\n\n```js\nimport * as React from 'react';\nimport { Extension, CustomBlock, CustomMark } from 'smartblock';\nimport 'smartblock/css/smartblock.css';\nExtension.push(new CustomMark({ \n tagName: 'span',\n className: '.small',\n icon: \u003cSomeIconComponent /\u003e\n});\n\nrender(\u003c\u003e\n \u003cSmartBlock \n extensions={Extensions}\n html={'\u003ch2\u003eHello World\u003c/h2\u003e\u003cp\u003e\u003csmall\u003ehello\u003c/small\u003e\u003c/p\u003e'}\n onChange={({ json, html }) =\u003e { console.log(json, html);}} \n /\u003e\n\u003c/\u003e, document.getElementById(\"app\"));\n```\n\n## Options\n\n| Props | description | type | default |\n| ------------ | ----------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| extensions | Array of extensions which extend the feature of SmartBlock | Extension[] | array of extensions |\n| onChange | Callback function which is called when the content of the editor is changed. You can get both html and json | Function | |\n| onInit | Callback function which is called when the editor is initialized | Function | |\n| json | The editor contents will be initialized with the json data | Object | {} |\n| HTML | The editor contents will be initialized with the HTML | String | '' |\n| showTitle | Title will be shown | Boolean | false |\n| showBackBtn | Btn to support history back will be shown | Boolean | false |\n| autoSave | The HTML will be stored to the localstorage every time the content is changed | Boolean | false |\n| getEditorRef | Get the editor ref object | Function | |\n## Download\n[Download ZIP](https://github.com/appleple/smartblock/archive/master.zip)\n\n## Github\n[https://github.com/appleple/smartblock](https://github.com/appleple/smartblock)\n\n## Contributor\n[@steelydylan](https://github.com/steelydylan)\n\n## License\nCode and documentation copyright 2020 by appleple, Inc. Code released under the [MIT License](https://github.com/appleple/smartblock/blob/master/LICENSE).","funding_links":[],"categories":["Editor Components","UI Components","TypeScript"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Fsmartblock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleple%2Fsmartblock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Fsmartblock/lists"}