diff --git a/README.md b/README.md index bde783e..052a7ec 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ CDN-first UI component workbench for rapid prototyping with [`@knighted/jsx`](ht ## What it is -`@knighted/develop` is a browser-native UI component workbench that demonstrates -modern component authoring without a local bundler-first inner loop. +`@knighted/develop` is a browser-native component editor/workbench for fast +UI iteration without a local bundler-first inner loop. The app is designed to showcase two libraries: @@ -18,20 +18,30 @@ The app is designed to showcase two libraries: - [`@knighted/css`](https://github.com/knightedcodemonkey/css) for in-browser CSS compilation workflows Dependencies are delivered over CDN ESM with on-demand loading by mode, so the -browser acts as the runtime host for render, lint, and typecheck flows. +browser acts as the runtime host for editing, render, lint, and typecheck flows. ## Core capabilities `@knighted/develop` lets you: -- write component code in the browser -- manage dynamic workspace tabs with add, rename, remove, and entry-role protection +- write component code in dynamic editor tabs in the browser +- add, rename, and remove tabs with entry-role protection for required tabs +- keep per-tab dirty/synced state while iterating across files - switch render mode between DOM and React - switch style mode between native CSS, CSS Modules, Less, and Sass - run in-browser lint and type diagnostics - open diagnostics in a shared drawer and jump to source locations -- toggle ShadowRoot preview isolation while iterating -- switch layout and theme while preserving fast feedback loops +- use iframe-isolated preview style encapsulation while iterating +- connect a GitHub repository and run Open PR / Push Commit workflows +- use AI chat with tab-aware proposals and apply/undo controls +- switch theme and collapse the preview panel while preserving fast feedback loops + +## Why this shape + +The app started as a focused compile-and-preview loop and has grown into a +more complete browser-native editor surface. The goal is still fast +experimentation, now with practical multi-file editing and repository workflows +in the same UI. ## Try it diff --git a/docs/article.md b/docs/article.md index 6fed297..e049e50 100644 --- a/docs/article.md +++ b/docs/article.md @@ -1,78 +1,90 @@ -# Forget The Build Step: A Browser-Native Workbench For JSX + CSS +# Forget The Build Step: A Browser-Native Editor For JSX + CSS -Frontend tooling has become incredibly capable. +Frontend tooling is incredibly capable. -It has also become very heavy. +It is also often front-loaded. -For many UI experiments, the first thing you do is not write code. You install dependencies, run a dev server, wait for transforms, and only then start iterating. +For many UI ideas, the first thing you do is not write code. You install, +configure, and wait. The creative loop starts late. -I wanted to try a different baseline: +[@knighted/develop](https://github.com/knightedcodemonkey/develop) is built +for a different default: fast prototyping from anywhere you can open a browser. -What if the browser is the dev environment? - -That idea became [@knighted/develop](https://github.com/knightedcodemonkey/develop). - -It is a lightweight in-browser UI component workbench built to showcase [@knighted/jsx](https://github.com/knightedcodemonkey/jsx) and [@knighted/css](https://github.com/knightedcodemonkey/css), with dependencies delivered over CDN ESM instead of requiring a local build step in the inner loop. +It is a browser-native editor/workbench for +[@knighted/jsx](https://github.com/knightedcodemonkey/jsx) and +[@knighted/css](https://github.com/knightedcodemonkey/css), delivered through +CDN ESM with mode-aware loading. ## The Loop, In Practice -Open a page, write JSX and styles, switch rendering/style modes, run lint/typecheck, and see results immediately. +Open the app, edit multiple files in dynamic tabs, switch render/style modes, +run lint/type diagnostics, and preview instantly. -No local bundler needed for that loop. +No local bundler is required for that inner loop. -## What Makes It Fun To Use - -The app is intentionally practical, not just a demo shell: +## What The App Gives You +- Dynamic tabbed editing (add, rename, remove, and protect required entry tabs) - Render mode switch: DOM or React - Style mode switch: CSS, CSS Modules, Less, Sass -- Live preview with ShadowRoot toggle -- In-browser lint and type diagnostics -- Diagnostics drawer with jump-to-line navigation (mouse or keyboard) +- Live preview with iframe-isolated style encapsulation +- In-browser lint and type diagnostics with jump-to-source navigation +- GitHub-connected workflows for Open PR and Push Commit +- AI chat with tab-aware edit proposals and explicit apply/undo controls -So it is not only "can this compile?" It is closer to "can I actually iterate on a component quickly?" +This is not only "can this compile?" It is about shipping the whole iteration +loop in one place: edit, validate, preview, sync, and refine. ## Why `@knighted/jsx` + `@knighted/css` Matter Here -`@knighted/develop` is primarily a showcase app. - -It demonstrates how these libraries behave in a real authoring environment: +The app demonstrates both libraries in realistic authoring conditions: -- `@knighted/jsx` gives you a direct path from JSX to rendered output, including DOM-first workflows. -- `@knighted/css` handles modern style pipelines in-browser, including Modules/Less/Sass. +- `@knighted/jsx` provides a direct path from JSX to rendered output, + including DOM-first workflows. +- `@knighted/css` handles modern browser-side style compilation, + including Modules/Less/Sass modes. -Using both together in one interface makes the bigger point obvious: modern browsers can do much more of the compile/authoring cycle than we usually ask them to. +Together they show how much of the authoring cycle modern browsers can run +directly. -## "Compiler-as-a-Service" Without A Backend Build Farm +## "Compiler-as-a-Service" Without A Build Farm In this project, Compiler-as-a-Service means: -- CDN handles module and WASM delivery. -- The browser tab does the actual compile, lint, typecheck, and render work. +- CDN delivers modules and WASM artifacts. +- The browser session performs compile, lint, typecheck, render, and editor + interactions locally. -It is service-oriented distribution, local execution. +It is service-oriented distribution with local execution. -And because loading is mode-aware, you only pay for what you use. If you never touch Sass, you never load Sass. +Mode-aware loading keeps costs aligned to usage: if you do not use Sass, +Sass does not load. ## Why This Matters -This is not trying to replace production pipelines. +This does not replace production pipelines. -It is about lowering the cost of exploration. +It lowers the cost of exploration while preserving enough workflow surface to +be useful for real component work. -When the setup tax drops, you try more ideas. When feedback is instant, you discover faster. And when the browser is the platform, sharing a repro can be as easy as sharing a URL. +When setup friction drops, teams try more ideas. When feedback is immediate, +they converge faster. When browser-native workspaces can sync to GitHub and +carry chat-assisted edit proposals, collaboration is lighter too. -For prototyping and component iteration, that is a meaningful shift. +For prototyping and component development, that is a meaningful shift. ## Try It - Live workbench: https://knightedcodemonkey.github.io/develop/ - Source: https://github.com/knightedcodemonkey/develop -If you are curious, start by toggling: +If you want a fast product tour, try this sequence: -1. DOM -> React render mode -2. CSS -> Modules -> Less -> Sass style mode -3. ShadowRoot on/off +1. Add a new tab, rename it, and make an edit. +2. Toggle DOM -> React render mode. +3. Toggle CSS -> Modules -> Less -> Sass style mode. +4. Open diagnostics and jump to a reported line. +5. Connect BYOT (Bring Your Own Token) by adding a GitHub personal access token, then run Open PR / Push Commit. +6. Ask chat for a targeted tab update, then apply it. -That sequence tells the story better than any architecture diagram. +That flow tells the product story better than any architecture diagram. diff --git a/docs/media/develop-ide-flow.gif b/docs/media/develop-ide-flow.gif index 7acc79a..236c106 100644 Binary files a/docs/media/develop-ide-flow.gif and b/docs/media/develop-ide-flow.gif differ