Dev.Text is the visual editor we built for our own workflow: an overlay that can attach to any Next.js project during development and let us edit text, fonts and styling directly on the rendered page without manually opening a code editor.
How it works
It runs as an independent local service and connects to the project with a single line in the development layout. Once enabled:
- Clicking a text block opens an inline editing toolbar.
- The font browser offers a locally available catalog of over 2,000 Google Fonts families, searchable and scrollable without an internet connection.
- Text changes are written directly to the corresponding
.tsxor.jsxfile, replacing the original text where it occurs uniquely in the code. - Style changes (font, size and color) are inserted as real JSX
styledeclarations using an abstract syntax tree (AST), rather than guessing Tailwind classes.
Why we built it
Editing copy and typography manually—opening the right file, locating the text, saving and refreshing—is slow when refining dozens of small details. Dev.Text reduces that cycle to a click.
It is an internal tool we use to create and refine client websites, not an externally distributed product.