DEV Community: Bùi Đức Nhật

Why I built a fully MIT, Notion-style block editor for React

Bùi Đức Nhật — Wed, 30 Sep 2026 13:52:06 +0000

TL;DR — slash-editor is a Notion-style block
editor for React. Headless core on Tiptap v3/ProseMirror, React hooks, and UI delivered as a
real shadcn registry, so the menus, toolbars and node views land in your repo as code you own.
MIT end to end, no paid tier, no hosted dependency.

Playground: https://slasheditor.dev/playground
Docs: https://slasheditor.dev/docs
Starter: https://github.com/buiducnhat/slash-editor/tree/main/examples/nextjs-starter

The gap

Every time I needed a "Notion-like" editor in a product, the engine was never the problem.
ProseMirror and Tiptap are excellent and MIT. Yjs and Hocuspocus make collaboration
self-hostable. The problem was the layer on top: the block interaction model.

Slash insertion, a hover drag handle, reordering nested blocks, "Turn into", block comments —
good options exist, but each came with a tradeoff for my use: styled npm components, a
different engine (Slate), or pieces like templates, AI or comments available on commercial
licenses or paid plans.

I wanted three things at once:

Notion-grade block UX, keyboard-first, with mouse equivalents.
UI I own, styled with my existing shadcn tokens, dark mode for free.
A 100% MIT dependency graph, with anything server-side (sync, AI, uploads) behind an adapter so I bring my own backend.

The design: core computes, react coordinates, registry renders

@slash-editor/core    Tiptap/ProseMirror extensions, schema, commands. No React, no CSS.
@slash-editor/react   Hooks over @tiptap/react: lifecycle, store subscriptions, caret anchors.
shadcn registry       The rendered UI. `shadcn add` copies it into your app.

Core never emits a class name. Every UI surface (slash menu, bubble toolbar, drag handle, block
menu) is a small state machine in core exposed through a subscribe/getState store; React
hooks turn that into state plus an anchor rect; the registry component renders it with
Popover, Command, and your Tailwind tokens.

The result is a split I've wanted for years: behavior ships over npm, so fixes reach you with
a version bump. Markup ships through the registry, so it's yours to change.

bun add @slash-editor/core @slash-editor/react
bunx --bun shadcn@latest add @slash-editor/slash-editor-kit

A few engineering details that were harder than they look

Drag handle without posAtCoords. The gutter and a block's left padding have no caret
position, so view.posAtCoords returns nothing exactly where the pointer is heading. Hover and
drop targets resolve from cached block rects instead (invalidated per transaction), picking the
smallest rect that contains the pointer so a list item wins over its list. Every move is a single
delete + insert transaction: one undo step, and the block's id rides along.

Nesting rules from the schema, not a wrapper. There's no universal blockContainer node.
Drops ask the schema: canNest checks contentMatchAt(childCount) (the state after existing
children, since listItem is paragraph block*), and canPlaceBeside falls back to the
enclosing container instead of splitting a list. That keeps the document plain Tiptap JSON, so
third-party extensions and markdown serialization keep working.

Yjs-safe from day one. No non-deterministic attribute defaults; block ids assigned once on
insert, never on render, and regenerated only on pasted duplicates — skipped for remote
y-sync transactions. That's why collaboration, comments anchored to blocks, and Mermaid
diagrams (source is document text, so edits merge per character) all compose.

What's in 0.5

Slash menu with ranking, aliases, groups, custom items
Drag handle with live preview card, block menu (duplicate, delete, turn into)
Headings, lists, task lists, toggles, callouts, quotes, columns, tables
Image / video / file / embed with an upload adapter
Mentions, AI actions via a stream adapter (bring your own model)
Real-time collaboration (Yjs, Hocuspocus or WebRTC), presence avatars, comments
Mermaid diagrams, table of contents, read-only documents
Markdown import/export and markdown shortcuts
Docs with llms.txt / llms-full.txt so your coding agent can read them

Non-goals

No hosted services — sync server, AI gateway and asset storage are adapters. No DOCX/PDF
fidelity, pagination or track changes. React only for now, though core stays renderer-free.

Try it / help out

⭐ Star the repo if it's useful
Try the playground (add ?collab=room-name and open it in two tabs)
Pick a good first issue
Tell me what's missing in Discussions

Feedback on the API shape is the most valuable thing right now, before 1.0 locks it in.

Ollamazing: Your Free, Open-Source AI Assistant Right in Your Browser

Bùi Đức Nhật — Fri, 14 Feb 2025 14:45:42 +0000

Hey fellow developers! 👋 I'm excited to introduce Ollamazing, a browser extension that brings the power of local AI models directly into your browsing experience. Let me share why you might want to give it a try.

What is Ollamazing?

Ollamazing is a free, open-source browser extension that connects with Ollama to run AI models locally on your machine. Think of it as having ChatGPT-like (or even Deepseek for newer) capabilities, but with complete privacy and no subscription fees.

🌟 Key Features

100% Free and Open Source
- No hidden costs or subscription fees
- Fully open-source codebase
- Community-driven development
- Transparent about how your data is handled
Local AI Processing
- Thanks to Ollama, we can run AI models directly on your machine
- Complete privacy - your data never leaves your computer
- Works offline once models are downloaded
- Support for various open-source models (llama3.3, gemma, phi4, qwen, mistral, codellama, etc.) and specially deepseek-r1 - the most popular open source model at current time.
Seamless Browser Integration
- Chat with AI right from your browser sidebar
- Text selection support for quick queries
- Context-aware responses based on the current webpage
Developer-Friendly Features
- Code completion and explanation
- Documentation generation
- Code review assistance
- Bug fixing suggestions
- Multiple programming language support
Easy Setup
- Install Ollama on your machine or any remote server
- Download your preferred models
- Install the Ollamazing browser extension
- Start chatting with AI!

🚀 Getting Started

# 1. Install Ollama
curl -fsSL https://ollama.com/install.sh | sh

# 2. Pull your first model (e.g., Deepseek R1 7 billion parameters)
ollama pull deepseek-r1:7b

Then simply install the extension from your browser's extension store, and you're ready to go!

For more information about Ollama, please visit the official website.

Important: If you run Ollama on local machine, ensure to setup the OLLAMA_ORIGINS to allow the extension can connect to the server. For more details, read Ollama FAQ, set the OLLAMA_ORIGINS to * or chrome-extension://* or the domain you want to allow.

💡 Use Cases

Code completion and explanation
Documentation generation
Code review assistance

🔒 Privacy First

Unlike cloud-based AI assistants, Ollamazing:

Keeps your data on your machine
Doesn't require an internet connection for inference
Gives you full control over which model to use
Allows you to audit the code and know exactly what's happening with your data

🛠️ Technical Stack

Use framework WXT to build the extension
Built with React and TypeScript
Uses Valtio for state management
Implements TanStack Query for efficient data fetching
Follows modern web extension best practices
Utilizes Shadcn/UI for a clean, modern interface
Use i18n for multi-language support

🤝 Contributing

We welcome contributions! Whether it's:

Adding new features
Improving documentation
Reporting bugs
Suggesting enhancements

Check out our GitHub repository https://github.com/buiducnhat/ollamazing to get started!

🔮 Future Plans

We're working on:

Enhanced context awareness
Custom model fine-tuning support
Improve UI/UX
Improved performance optimizations
Additional browser support

Try It Today!

Ready to experience local AI in your browser? Get started with Ollamazing:

Chrome web store: https://chromewebstore.google.com/detail/ollamazing/bfndpdpimcehljfgjdacbpapgbkecahi
GitHub repository: https://github.com/buiducnhat/ollamazing
Product Hunt: https://www.producthunt.com/posts/ollamazing

Let me know in the comments if you have any questions or feedback! Have you tried running AI models locally before? What features would you like to see in Ollamazing?

The most useful VS Code extensions for developer

Bùi Đức Nhật — Fri, 01 Apr 2022 10:22:43 +0000

Visual Studio Code a.k.a VS Code, released by Microsoft, is one of the most popular open source code editors for developers.

VS Code helps developers increase productivity in the execution of projects. One of the reasons make VS Code popular is its variety of available extensions in marketplace.

Today, I am going to list some extensions that I usually use.

Note: The below extensions are useful for the most developers in any field, not just for Web App or Embedded developers. So in the future I will have other articles about extensions suitable for specific areas.

They are:

GitLens
Visual Studio IntelliCode
Project Manager
vscode-icons
Bracket Pair Colorizer 2
indent-rainbow

GitLens

VS Code has already integrated built in git GUI, it's very helpful for developers because nowaday git is absolutely necessary for them.

When working with other team members, GitLens is a very good choice with its features:

Revision navigation through file history.
A current line blame annotation at the end of the line showing the commit.
A status bar blame annotation for the commit and author who last modified the current line.

You can find it here (in Visual Studio Code marketplace).

Visual Studio IntelliCode

At the time I write this article, Visual Studio IntelliCode extension has the 8th most downloads in marketplace. So it became indispensable for developers.

This extension helps us writing code quickly by adding a star before the code snippets (it means this code had used very very much before by developers over the world).

You can install this extension here.

Project Manager

Normally, each project is a folder/directory of your OS. Each time you want to open your project, you have to open the corresponding folder/directory and of course, you have to remember its path.

When the number of your projects increases, or you save them in a disorganized manner, you usually forget where they locate.

This problem can be easily solved with Project Manager extension. You can save your projects like folder/directory or even your workspaces. Your projects will be visible in the side bar like this

You can install this extension here.

vscode-icons

This extension is just an icon theme for VS Code. It supplies icon for the folders/directories and files in the explorer sidebar of VS Code.

There are many good choice icon theme for us at marketplace, the reason why I recommend this because vscode-icons is the official extension of Microsoft (who made VS Code).

You can install this extension here.

Of course, you can easily find out for your favorite themes at marketplace by type icon into the search input. The next step you just select and install them.

Bracket Pair Colorizer 2 (deprecated)

Note: This extension is now deprecated and no longer being supported. Instead, this is now a built in feature of VS Code.

Have you ever known about LISP?

When your code block increase too big, you use too many brackets, you difficultly find the rights bracket pairs, this extension will help you.

Look at this image and you will understand how it works

~~You can install this extension here.~~ (deprecated).

Now you can enable Black pair colorizer as a native feature in VS Code.

Just open your settings.json of your VS Code and add two following lines:

{
  ...
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  ...
}

indent-rainbow

Like Bracket Pair Colorizer 2, indent-rainbow help us easily when see the code blocks, especially for Python developer

You can install this extension here.

Note: the last both extensions can be customized, you should read their documents at their homepage to continue.

These are the best extensions for me, and it totally from my opinion, so if you know more helpful extensions, recommend for us!