Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,40 @@ 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:

- [`@knighted/jsx`](https://github.com/knightedcodemonkey/jsx) for DOM-first and React-mode JSX authoring
- [`@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
- 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 layout and theme while preserving fast feedback loops
Comment thread
knightedcodemonkey marked this conversation as resolved.
Outdated

## 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

- Live workbench: https://knightedcodemonkey.github.io/develop/
Expand Down
90 changes: 51 additions & 39 deletions docs/article.md
Original file line number Diff line number Diff line change
@@ -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 and run Open PR / Push Commit.
Comment thread
knightedcodemonkey marked this conversation as resolved.
Outdated
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.
Binary file modified docs/media/develop-ide-flow.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.