Building a Notion-Style Editor from Scratch with Modern Web Tech

Oathan Rex — Thu, 08 Jan 2026 11:40:42 +0000

Rich-text editors are everywhere — notes apps, documentation tools, knowledge bases.

Tools like Notion made block-based writing feel natural, flexible, and powerful.

As an experiment (and learning project), I built a Notion-style rich text editor using modern web technologies, focusing on clean UX, extensibility, and developer clarity.

👉 GitHub Repo:

https://github.com/oathanrex/notion-style-editor

✨ What Is This Project?

This project is a block-based rich text editor inspired by Notion’s writing experience.

It’s designed to be:

Modular
Extendable
Easy to embed into other web apps

Instead of being a monolithic editor, the goal was to keep the architecture flexible so new blocks, plugins, or behaviors can be added later.

🚀 Core Features

🧱 Block-Based Editing

Paragraphs, headings, lists, quotes
Each piece of content is treated as a block
Easy to reason about and extend

✏️ Rich Text Formatting

Bold, italic, underline, inline code
Keyboard shortcuts for fast writing
Clean separation between content and UI

⚡ Slash (`/`) Command Menu

Quickly insert blocks and components
Familiar Notion-style workflow
Designed to be extensible

🎯 Design Goals

When building this editor, I focused on a few core principles:

Clarity over complexity No unnecessary abstractions or magic.
Extensibility first Custom blocks and plugins should be easy to add.
Framework-friendly Can be adapted for React, Next.js, or Vanilla JS projects.
Good UX by default Keyboard-first, minimal UI, predictable behavior.

🛠️ Tech Stack

This project uses a modern but lightweight stack:

JavaScript (ES6+)
Modular editor architecture
Block-based content model
CSS / utility-first styling (Tailwind-ready)

The editor is intentionally kept framework-agnostic so it can evolve in different directions.

📦 Project Structure (High-Level)


src/
├── components/     # UI (toolbars, menus)
├── editor/         # Core editor logic & block schema
├── plugins/        # Slash menu, shortcuts, extensions
├── utils/          # Helpers & shared logic
└── styles/         # Editor styling

Keeping responsibilities separated makes experimentation much easier.

🔧 Getting Started

bash git clone https://github.com/oathanrex/notion-style-editor.git cd notion-style-editor npm install npm run dev`

Open http://localhost:3000 to see the editor running locally.

🧠 What I Learned

Building a rich-text editor teaches you a lot about:

Cursor and selection management
Block vs inline content models
Keyboard accessibility
Balancing UX with technical constraints
Designing systems meant to be extended later

It’s a deceptively deep problem space.

📚 Use Cases

This editor can serve as a foundation for:

Note-taking apps
Documentation platforms
Knowledge bases
Blog CMS systems
Internal tools

🤝 Open Source & Contributions

The project is open source and intentionally structured for experimentation.

If you’d like to:

Add new block types
Improve the slash menu
Enhance accessibility
Experiment with collaboration features

Feel free to fork the repo or open a pull request.

🔗 Links

GitHub: https://github.com/oathanrex/notion-style-editor

If you’re interested in editor architecture, block-based systems, or building complex UI tools from scratch, I’d love to hear your thoughts or feedback in the comments.

🐍 Building a Premium Snake Game with Vanilla JavaScript

Oathan Rex — Thu, 08 Jan 2026 11:33:05 +0000

Classic arcade games never die — they just evolve.

I recently built a modern, polished Snake game using nothing but HTML5, CSS3, and vanilla JavaScript.

The goal was simple: keep the nostalgia, but add the kind of visual polish, responsiveness, and game feel you’d expect from a premium browser game.

🎮 Play the Game

👉 Live Demo: https://oathanrex.github.io/snake-game/

Snake - Premium Edition | Play Free Online

Classic Snake reinvented with stunning neon visuals, multiple modes, and smooth gameplay

oathanrex.github.io

✨ What Makes This Snake Game Different

This isn’t just another Snake clone. I focused heavily on responsiveness, clarity, and feedback.

🔥 Core Features

3 Game Modes
- Classic
- No Walls
- Obstacles
4 Difficulty Levels
- Easy, Normal, Hard, Insane
Premium Visuals
- Neon glow effects
- Particle explosions
- Smooth canvas animations
Mobile Support
- Swipe gestures
- On-screen touch controls
Progressive Difficulty
- Speed increases as you level up
Local High Scores
- Stored using LocalStorage

🕹️ Controls

Platform	Controls
Desktop	Arrow Keys or WASD
Mobile	Swipe or Touch Buttons
Pause	ESC or P

Input buffering is used so direction changes feel responsive even at higher speeds.

🛠️ Tech Stack (No Frameworks)

I intentionally avoided frameworks to keep the project lightweight and transparent.

HTML5 Canvas — rendering & animation
Vanilla JavaScript (ES6+) — game logic
CSS3 — UI, layout, glow effects
Web Audio API — procedural sound effects
No external dependencies

⚙️ Technical Highlights

🎨 High-DPI Canvas Rendering

The game detects window.devicePixelRatio and scales the canvas accordingly, ensuring crisp visuals on Retina and 4K displays instead of blurry pixels.

🎧 Procedural Audio

All sound effects are generated with the Web Audio API, which:

Keeps the game lightweight
Avoids loading audio files
Allows dynamic pitch and timing

🧠 Clean Game Architecture

Even though the project is intentionally kept in a single file, the code is structured around clear responsibilities:

Input handling
Game state updates
Rendering loop
Particle system
Audio feedback

This makes the game easy to extend or tweak.

📱 Mobile-First Considerations

Mobile wasn’t an afterthought. The game includes:

Swipe detection
On-screen D-pad
Responsive layout
Particle limits for performance safety

The result is a smooth experience on both desktop and phones.

🚧 Challenges & Learnings

Some interesting challenges while building this project:

Preventing canvas blur on high-DPI displays
Handling browser audio autoplay restrictions
Balancing visual effects with performance
Avoiding input race conditions at high speed
Keeping gameplay consistent across devices

Each problem required small but important design decisions.

🎮 Try It Yourself

👉 Play here: https://oathanrex.github.io/snake-game/

Feedback, suggestions, and forks are welcome.

👨‍💻 Author

Oathan Rex

If you enjoyed the game or found the breakdown useful, feel free to leave a comment or share your thoughts 👋

Forem: Oathan Rex