Forem: PFMCODES

[Boost]

PFMCODES — Sun, 29 Mar 2026 18:52:28 +0000

PFMCODES

Mar 22

I built a code editor library because Monaco frustrated me

#showdev #javascript #performance #webdev

Comments 2

2 min read

[Boost]

PFMCODES — Mon, 23 Mar 2026 11:43:55 +0000

PFMCODES

Mar 22

I built a code editor library because Monaco frustrated me

#showdev #javascript #performance #webdev

Comments 1

2 min read

I built a code editor library because Monaco frustrated me

PFMCODES — Sun, 22 Mar 2026 18:38:48 +0000

I built a code editor library because Monaco frustrated me

Monaco was slow, buggy, and the syntax highlighting wasn't even that good. So I built my own.

Caret is a lightweight code editor library built on the EditContext API. 605 lines of code. ~32KB. Loads in ~25ms.

Why not CodeMirror or Monaco?

Monaco was my go-to for other projects. But after dealing with slow load times, sync bugs, and unreliable highlighting, I decided to start from scratch. The first version shipped in a few days. The current version is a complete rewrite — cleaner, faster, and a fraction of the size.

Here's how it compares:

	Caret	Monaco	CodeMirror 6
Bundle size	~32KB	~5MB	~400KB
Load time	~25ms	~2-3s	~500ms
Lines of code	650	~300,000	~50,000
Architecture	EditContext	textarea	contenteditable

Load time on Chrome

Load time on Edge

The architecture

Previous versions used a textarea-based input model, which caused constant caret synchronization issues. The current version (v0.3+) is built entirely on the EditContext API — a browser API designed specifically for custom editors. It gives direct control over text input with no hacks.

How it works under the hood:

EditContext receives all keyboard input, IME, and clipboard events
A single string text is the source of truth — no dual-layer sync issues
render() calls hljs.highlight() and updates the DOM
The caret is positioned via Range.getBoundingClientRect() — no canvas math
Undo/redo is a pure string stack storing both content and cursor offset

The codebase is split into five focused modules:

textEditor.js — core editor logic (400 lines)
caret.js — pixel-perfect caret positioning via Range API
lineCounter.js — line number tracking
font.js — custom font loading
languages.js — Highlight.js language registration

Features

Live syntax highlighting via Highlight.js
Custom caret rendering via Range API
Smart indentation — Tab/Shift+Tab for code blocks
Full undo/redo stack with cursor position restoration
Arrow key navigation with column preservation
Read-only lock mode
Multiple editor instances on the same page
Custom font support
Plain text paste — no rich HTML bleed
Browser detection with a friendly error for unsupported browsers

Themes supported: Tokyo Night, Monokai, GitHub Dark, Atom One Dark, Nord, Night Owl, VS2015, and more.

Languages supported: JavaScript, Python, HTML, and anything Highlight.js covers.

Quick start

npm install @pfmcodes/caret

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="editor"></div>
  <script type="module">
    import Caret from 'https://esm.sh/@pfmcodes/caret';

    const editor = await Caret.createEditor(
      document.getElementById('editor'),
      '// Start coding...',
      {
        id: 'my-editor',
        dark: true,
        language: 'javascript',
        hlTheme: 'tokyo-night-dark'
      }
    );
  </script>
</body>
</html>

Browser support

Caret v0.3+ uses the EditContext API, which is currently only available in Chromium-based browsers (Chrome, Edge). Firefox and Safari are not supported yet — Firefox tracking issue here.

Neutronium is back – here's everything that changed since v3

PFMCODES — Mon, 14 Jul 2025 14:22:39 +0000

Neutronium is back – here's everything that changed since 1000 downloads

Eight months ago I posted about Neutronium hitting 1,000 downloads in its first 24 hours. A lot has changed since then.

Neutronium is now at v3.4.5, and it's a completely different project from what I launched in July.

What is Neutronium?

A lightweight JavaScript framework built for developers who want explicit control, predictable behavior, and zero unnecessary abstractions.

React-like ergonomics. No virtual DOM. No build step. No heavy runtime.

npm install neutronium

What's new since launch

It got smaller

The original release was ~139kb unpacked. It's now 57.7kb — more than half the size, with more features.

Hooks

useState and useEffect are now supported. If you're coming from React, you already know how to use them.

React-like JSX syntax

Neutronium now uses JSX-style syntax, making it much easier to switch from React without relearning everything.

import { createApp } from 'neutronium'

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default function App() {
  return (
    <>
      <h1>Welcome to Neutronium</h1>
      <Greeting name="yourName" />
    </>
  );
}

createApp(App).mount('body');

Browser-safe compiler

One of the biggest additions: /sandbox.mjs — a browser-safe compiler that lets you run Neutronium without Node.js. Perfect for online editors and playgrounds.

import { compile } from "neutronium/sandbox.mjs";
const result = compile(code);

TypeScript support

TypeScript types are now included (~4.35kb). No separate package needed.

Ecosystem

Two companion packages are now available:

@neuhq/alert
neutronium-alert

The full picture

	July 2025	Now
Version	v3.0.0	v3.4.5
Size	~139kb	~57.7kb
Hooks	No	Yes
JSX	Yes	Yes
Browser compiler	No	Yes
TypeScript	Broken	Yes
Playground	No	Yes

Forem: PFMCODES

[Boost]

I built a code editor library because Monaco frustrated me

[Boost]

I built a code editor library because Monaco frustrated me

I built a code editor library because Monaco frustrated me

I built a code editor library because Monaco frustrated me

Why not CodeMirror or Monaco?

Load time on Chrome

Load time on Edge

The architecture

Features

Quick start

Browser support

Links

Neutronium is back – here's everything that changed since v3

Neutronium is back – here's everything that changed since 1000 downloads

What is Neutronium?

What's new since launch

It got smaller

Hooks

React-like JSX syntax

Browser-safe compiler

TypeScript support

Ecosystem

The full picture

Links