Tenon

A code editor built for big single-file web pages.

Some projects end up as one HTML file with thousands of lines: the markup, the styles and every script all in one place. Scrolling through that to find one function gets old fast. Tenon reads the file, works out its structure, and gives you a map of it. You tap what you want and you are there.

Tenon is free, runs in your browser, and works just as well on a phone as on a desktop. There is nothing to install and no account to make.

---

Why structure matters

Most editors show you a file as one long wall of text. Tenon shows you what is inside it.

Open a page and the side panel lists:

Tab	What it shows
Structure	Every script, style block and element with an id, nested the way they sit in the file
Functions	Functions, classes, methods, getters, setters and self-running blocks, with a filter box
Variables	Variables grouped by where they are declared, plus CSS custom properties
Constants	Every const in order, with the function or class it lives in
Find	Search across the open file or the whole project
Marks	Your bookmarks across every file
Projects	Your projects, folders and files
GitHub	Pull, push and create repositories

Tap any row to jump straight to it. A breadcrumb at the bottom of the screen always shows which block your cursor is in.

---

Edit one piece at a time

This is the part that makes large files manageable.

• Block editor. Tap the pencil next to any function, class, script or style rule. Only that code opens, in its own editor. Make your changes and tap Apply. It goes back into the file as a single change, so one undo reverses it. Tenon checks your brackets before applying and warns you if the file changed underneath you.
• Edit here. Press Ctrl+E to open whatever block your cursor is inside, or select some lines and open just those.
• Focus mode. Hide everything except one block, right in the main editor, so you can work without distraction.
• Jump to definition. On a touch screen, double tap a function name. If Tenon finds where it is defined, a small button appears. Tap it to go there. It checks the same block first, then the file, then your other files.
• Jump back. After any jump, one tap returns you to where you were.

---

Built for phones too

Tenon was designed for small screens first, and it shows.

• A key bar above your keyboard for the symbols that are awkward to type: brackets, quotes, arrows, =>, && and more. Paired characters place the cursor between them.
• Swipe from the left edge to open the side panel, and swipe left to close it.
• Pinch the editor to zoom the text.
• Expand selection grows from word to line to block, so you rarely need to drag selection handles.
• Your phone's Back button closes dialogs, the preview and the side panel. It never throws you out of the app.
• A safety net catches the occasional stray keyboard glitch that would wipe out a selected word.

---

Everything you expect from an editor

• Syntax highlighting for HTML, CSS and JavaScript
• Code folding, bracket matching and auto-closing tags
• Find and replace with case matching, regular expressions and $1 capture groups
• Rename a name across the file in a couple of taps
• Bookmarks that follow your text as you edit
• Go to line, duplicate line, move lines up and down
• Sort, reverse, de-duplicate and trim lines
• A command palette (Ctrl+Shift+P) with every action in one searchable list
• Tenon remembers your cursor, scroll position, folds and open panels for every file

---

Run your page

Tap ▶ to see your page in a live preview. Console messages and errors appear underneath, so you can debug on a phone with no developer tools.

If your page links a script or stylesheet that lives in the same project, Tenon uses your copy automatically.

Preview pages are sandboxed by default. If a page needs to save data, you can turn on Full access for pages you trust, inspect what it stored, and clear it with one button.

---

Tools for cleaning up and shipping

Tool	What it does
Format	Tidies a selection or a whole file with Prettier. Large scripts are processed in pieces so the editor stays responsive.
Minify	Shrinks a file with Terser and CSSO and shows the size before and after, including gzipped size.
Obfuscate	Makes JavaScript harder to read while keeping size and speed close to the original. Your original is always kept.
Split into files	Moves the inline styles and scripts of a page into separate .css and .js files and links them in the same order. You can preview every block, name each file, and leave out anything that should stay inline.
Metadata editor	Shows the title, description, language, icon and link preview tags as a simple form. Tags you do not touch stay exactly as they were.
Clean up typography	Finds long dashes, curly quotes, odd spaces, emoji in comments and filler comments, and fixes the ones you tick.

---

Projects, folders and GitHub

Keep as many projects as you like, each with its own folders and files. Import .html, .js, .css, .json and .txt files, and export a whole project as a single .tenon file to back it up or move it to another device.

Connect GitHub with a personal access token and you can:

• Pull a repository into a new project, or update the current one with only what changed
• Push your changes after reviewing every file, with a line-by-line diff for each
• Create a new private or public repository straight from a project
• Spot conflicts early: files that changed on GitHub since your last sync are flagged before you overwrite them

---

Private by design

• Your projects are stored in your own browser. Nothing is uploaded.
• There is no Tenon server, no tracking and no account.
• Your GitHub token stays on your device and is only ever sent to GitHub when you pull or push.
• Formatting tools are downloaded from a public library host the first time you use them. Everything else works offline.

Because your work lives in your browser, clearing your browser data clears your projects too. Export anything you would not want to lose.

---

Handles very large files

Tenon does its heavy work, like reading structure and searching, in the background so typing stays smooth. Files over a million and a half characters switch off the most expensive features automatically, so even huge pages remain usable.

---

Getting started

1. Open Tenon. A small demo project is ready to explore.
2. Tap ☰ to open the side panel and see the structure of the file.
3. Tap any function or block to jump to it, or the pencil to edit it on its own.
4. Tap ▶ to run your page.
5. Tap ? any time for the full guide.

Tenon is free to use. It is built on CodeMirror 5, with Prettier, Terser and CSSO for formatting and minifying, all open source.