An editor built with blocks.

Related tags

Learning resource editor web wysiwyg crdt rich-text-editor notion yjs collaborative-editing
Overview

Blocky Editor

Blocky Editor is an editor which supports the concept of blocks. It can help you to build an editor like Notion. It's tiny, fast and extensible. You can extend it with blocks.

Demo

Features

  • Extremely small.
  • Extensible. Extend the editor with custom blocks and spans.
  • Static typed.

Packages

  • Core(npm): The core of the editor. Written in vanilla JS. It can be used standalone without any UI frameworks.
    • Gzipped size: ~14kb
  • Preact(npm): Wrap the editor in Preact. Provide the UI facilities such as toolbar and banner.
  • Yjs(npm): Connect the document with yjs for collaborating editing.
  • Example: The example to demonstrate how to use the editor.
    • Gzipped size: ~50kb (one-time loading)

Resources

Compatibility

Tested on

  • Google Chrome
  • Microsoft Edge
  • Safari

FAQ

Why does it use Preact instead of React?

Because it's small. React(used with ReactDOM) costs nearly 47kb after minified and gzipped. And Preact costs 4kb. I want the size of the editor to be as small as possible.

And Preact is closer to the DOM. React has an abstract layer for event handling, which is complicated and useless for the editor.

Actually, you can wrap the editor in React/Vue/Angular. It's easy to do that. I don't have time to do that, and Preact is good enough for me.

You might also like...

Essential UI blocks for building mobile web apps.

Ant Design Mobile Essential UI blocks for building mobile web apps. English Doc · 中文文档 · Discord · 钉钉 $ npm install --save antd-mobile # or $ yarn add

Jan 2, 2023

MySQL meets Jupyter notebooks. Grasp provides a new way to learn and write SQL, by providing a coding-notebook style with runnable blocks, markdown documentation, and shareable notebooks. ✨

MySQL meets Jupyter notebooks. Grasp provides a new way to learn and write SQL, by providing a coding-notebook style with runnable blocks, markdown documentation, and shareable notebooks. ✨

A New Way to Write & Learn SQL Report Bug · Request Feature Table of Contents About The Project Built With Getting Started Prerequisites Installation

Sep 1, 2022

This is a Google Chrome Extension which blocks social media sites.

This is a Google Chrome Extension which blocks social media sites.

Social Media Blocks (1.0.3) This is a Google Chrome Extension which blocks social media sites like Twitter: Facebook, Instagram, LinkedIn, WhatsApp, R

Dec 15, 2022

jQuery plugin for showing a calendar yearview with blocks (github contributions style)

jQuery plugin for showing a calendar yearview with blocks (github contributions style)

calendar-yearview-blocks jQuery plugin for showing a calendar yearview with blocks (github contributions style) Code adopted from https://github.com/b

Feb 28, 2021

Chrome Extension To Reveal Observable Notebooks As Quarto QMD {ojs} Blocks & provide downloads of FileAttachments and zipped Quarto project

Chrome Extension To Reveal Observable Notebooks As Quarto QMD {ojs} Blocks & provide downloads of FileAttachments and zipped Quarto project

reveal-qmd Chrome Extension To Reveal Observable Notebooks As Quarto QMD {ojs} Blocks Usage: git clone [email protected]:hrbrmstr/reveal-qmd In Chrome (e

Nov 29, 2022

An obsidian plugin that allows code blocks executed interactively in sandbox like jupyter notebooks. Supported language rust、kotlin、python、Javascript、TypeScript etc.

An obsidian plugin that allows code blocks executed interactively in sandbox like jupyter notebooks. Supported language rust、kotlin、python、Javascript、TypeScript etc.

Obsidian Code Emitter This plugin allows code blocks executed interactively like jupyter notebooks. Currently, support languages: Rust Kotlin JavaScri

Dec 28, 2022

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Jan 4, 2023

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

Dec 30, 2022

A lightweight vanilla JavaScript app for expanding and collapsing blocks of text.

A lightweight vanilla JavaScript app for expanding and collapsing blocks of text.

Read more button A lightweight vanilla javascript read more button for expanding and collapsing blocks of text. Features Choose how many text to keep

May 11, 2022
Comments
  • Inconsistent paired undo/redo

    Inconsistent paired undo/redo

    This is an easy-to-reproduce issue that may be encountered at high frequency.

    To reproduce:

    • Insert or delete a word in blocky example
    • Undo -> redo -> undo -> redo

    After second undo, the history state can't be recovered again :(

    opened by doodlewind 0
  • Optional title block support

    Optional title block support

    Blocky looks very promising!

    I'm trying to find out if I can integrate Blocky as a simple input box component (e.g. using it in a comment section), since it's really light. But currently Blocky assumes a title block by default, while in this case title is generally not needed.

    I did some quick tweaks based on current master branch, adding hasTitle: false config and it seems to work (https://github.com/doodlewind/blocky-editor/commit/448d376a95ba2c78886daf0daec774041e5089ac). But the behavior of enter breaks, so not sure if there is any other coupling related to title concept. Any ideas? Would love to see what I can do :)

    enhancement 
    opened by doodlewind 0
Owner
Vincent Chan
C++/TypeScript. Interested in Compiler/OS/Frontend. ☕️✈️🆕
Vincent Chan
GitHub https://blocky-editor.dev/
Powerful rich text editor using Vue.js and Quill. About @quilljs editor component for @vuejs

quill-vuejs Quill editor component for Vue. 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Preview Example CDN example page Component example page Install NPM

Chi Zhang 10 Aug 10, 2022
Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS.

Magnus Visual Studio Code Editor for Rock RMS Triumph Tech’s Magnus Editor is a full-featured remote editor for Rock RMS. Rock RMS is an open source R

Triumph Tech 8 Nov 23, 2022
Kirby Conditional Blocks plugin

Kirby 3 plugin: disables blocks in layout fields when the column width does not match the block requirements

Roman Steiner 13 Dec 21, 2022
Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Rani 15 Dec 26, 2022
Generates documentations for pug.js mixins and blocks.

pug-doc-generator Generates documentation files for pug.js mixins, blocks and more. How to use All mixins with comments starting with the @pugdoc mark

Ofertório 3 Apr 21, 2022
Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

null 92 Dec 26, 2022
📊 AlphaSwap subgraph - (Blocks, token info, profiles, pricing data, LP metrics, etc...)

AlphaSwap Subgraph AlphaSwap is a decentralized protocol for automated token exchange on the KCC network. This subgraph dynamically tracks any pair cr

Brandon 3 Jul 9, 2022
Get the latest Flashbots blocks and Flashbots transactions using TypeScript in two lines of code !

mev-blocks-js This package can let you query the Flashbots blocks API easily from any JavaScript or TypeScript project. You can access the Flashbots b

Luca G.F. 6 May 14, 2022
An obsidian plugin that give additional features to code blocks.

Obsidian Advanced Codeblock Add additioinal features to code blocks. Demo Feature Add line numbers to code block Add line highlight to code block Usag

lijyze 29 Jan 3, 2023
Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with <3

Gutpress(WordPress Gutenburg Block Plugin) Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan w

Arif Khan 4 Nov 23, 2022