Add a code editor and a file browser
Editing, browsing and previewing files inside your product.
The problem
Your product needs to show a file: a config, a template, a snippet, an upload.
The choices are a <textarea> with no highlighting, or a full IDE-scale editor
that dwarfs the rest of your bundle and still needs a week of configuration.
And "show a file" quickly means several kinds of file — an image, a PDF, an audio clip — each of which becomes its own integration.
What you are building
Live surfaces, not screenshots — every one composed from the same components you would install.
Code surface
fancy-code's editor, driveable by an agent through the code bridge as well as by a keyboard.
The code
// Controlled value + onChange, so `code_*` bridge tools edit exactly what the
// human sees. The toolbar and panel are composable rather than baked in.
<CodeEditor value={source} onChange={setSource} language="typescript" lineNumbers>
<CodeEditor.Toolbar />
<CodeEditor.Panel />
</CodeEditor>How to solve it
Add the editor
A lightweight embedded code editor — highlighting and editing without an IDE's footprint.
Run thisbash npm install @particle-academy/fancy-codeBrowse files with the core library
The file browser is a core primitive. It is controlled, so selection and navigation are your state, and it takes an opt-in new-folder affordance when your app allows creating them.
Preview whatever the file turns out to be
Media viewers for images, video, audio and PDFs, plus a resolver that picks the right one — so "show this file" is one component rather than a switch statement you maintain.
Show changes as changes
The shared file core is what lets the editor show a diff gutter against a base revision instead of just current contents.