Introducing the @knighted/jsx + @knighted/css Stack: Standards-Based Flexibility for Modern Web Development

Morgan Ney — Thu, 25 Dec 2025 03:52:26 +0000

In the rapidly evolving landscape of web development, 2026 presents a clear divide: tools that abstract away native browser behavior and tools that accelerate it. The @knighted stack — comprising @knighted/jsx and @knighted/css — sits firmly in the latter category, providing the developer experience (DX) of a modern framework while operating entirely on native web standards and Rust-powered infrastructure.

Demo App: Experience the @knighted stack in action by visiting the live demo at morganney/css-jsx-app!

At the heart of @knighted lies a transformative philosophy: accelerate native web standards without layering on heavy abstractions. Central to this vision is its Shadow DOM-powered integration, which guarantees true style encapsulation and predictable component behaviors. Combined with Rust-speed tooling, full TypeScript safety, and universal runtime compatibility, @knighted offers a modern web development toolchain that’s both lightweight and powerful.

The Shadow DOM Difference: Fully Encapsulated Components

One of the core innovations of @knighted/jsx + @knighted/css is its first-class support for Shadow DOM. By leveraging this browser-native feature, @knighted provides true isolation for styles, ensuring that:

CSS Conflicts are Eliminated: Scoped Shadow DOM styles guarantee that components are fully sealed from external selectors or accidental style leakage.
Global CSS Pollution is Prevented: Unlike traditional CSS or heavy CSS-in-JS solutions, every @knighted component is wrapped in an encapsulated style boundary.
Performance Benefits are Maximized: Shadow DOM enables parallel DOM rendering and style application, leveraging browser optimizations for speed.

This ensures that every component you build with @knighted is predictably styled, portable, and reusable, without requiring additional runtime libraries or hacks.

Why `@knighted` is a Game-Changer in 2026

1. The "Native" Philosophy: Standards-First

Unlike other Rust-based frameworks (e.g., Leptos, Dioxus) that replace web standards with Rust macros and WASM abstractions, @knighted embraces the existing browser-native model:

Standards as Authoring: Write valid JavaScript, CSS, and DOM-based code. If you know MDN documentation, you’re already up to speed.
Shadow DOM as Default: Components automatically use encapsulated styling and structure, aligning with the modern evolution of web component standards.
Future-Proof: Features like Constructable Stylesheets and Shadow DOM align with browser capabilities, ensuring compatibility with future browser optimizations.
Lightweight by Design: There’s no heavy runtime abstraction or proprietary syntax—just modern tools that accelerate the standards you already use.

2. Rust-Powered, Not Rust-Required

The @knighted stack uses the Oxc toolchain (Oxidation Compiler) to handle the "heavy lifting" of build time:

Instant Builds: Rust-powered parsing, scoping, and transpilation result in near-instant builds and minified file outputs.
Bridge Architecture: Rust handles performance-critical tasks at build time (e.g., CSS scoping, selector mapping) and hands off clean, optimized JavaScript for runtime. No need to manage a WASM memory heap or recompile binaries.

3. Type Safety as a Core Feature

At its heart, @knighted integrates deeply with TypeScript to create a closed loop system for static analysis and safety:

Virtual JSX Mapping: With the TypeScript Language Service Plugin, tagged templates like jsx and reactJsx are seen by the compiler as real JSX, enabling in-template autocompletion, red-line errors, and refactoring.
Shadow DOM-Driven Selectors: Type-safe CSS selectors derived directly from scoped Shadow DOM styles ensure no broken class references make it to runtime.

This combination of tools delivers unmatched confidence, productivity, and type safety while keeping workflows simple.

4. Universal Interoperability

The @knighted stack is not a proprietary silo—it’s a highly interoperable ecosystem that integrates seamlessly with existing technologies:

Switchable Runtimes: Use jsx for lightweight DOM manipulation and performance-critical Web Components or reactJsx for React-based legacy systems.
SSR via Shims: The @knighted/jsx/node environment enables native DOM code to function out-of-the-box on the server using high-performance shims (e.g., linkedom, jsdom). No specialized rendering engines are needed.

5. Multi-Dialect CSS, Stable Selectors, and Why It Matters

@knighted doesn't lock you into one styling paradigm—it works with CSS Modules, Sass Less, and Vanilla Extract, surfacing both hashed and stable classes when needed. This means:

One loader for all your web styling: Move between paradigms as your project grows or legacy code is absorbed.
Predictable, type-safe selectors: Get complete autocompletion and error checking inside your .js or .ts/.tsx code.
Encapsulation AND flexibility: Styles work in global, shadow DOM, or any context without rewrite.

Core Features Reimagined

Authoring on Standards

Tag-based components and styles leverage browser-native syntax:

import { jsx } from '@knighted/jsx/index.js'
import styles from './theme.knighted-css.js'

jsx`
  <section class="${styles.section}">
    <h1>Encapsulated, Predictable Styles</h1>
    <button class="${styles.button}" onClick=${() => console.log('tapped')}>
      tap me
    </button>
  </section>
`

Tagged Template Literals: Simple, readable, and interoperable with both DOM and React runtimes.
Scoped Shadow DOM Styles: Achieve isolation and reusability without additional tooling.

Runtime on Standards

Ultra-thin runtime layers map directly to browser APIs:

Native DOM Objects: Outputs real Nodes, DocumentFragment, and SVGElement, avoiding unnecessary abstraction layers.
True Shadow DOM Styling: Ensures every component maintains its encapsulated state, eliminating global style conflicts and improving overall application reliability.

Full TypeScript Integration

Development is made safer and faster via intelligent tooling:

In-Template Type Checking: Catch errors in template literals at compile time.
IDE Intelligence: Enjoy refactoring, autocomplete, and go-to-definition support inside templates.

CSS Selector Type Generation

Solve the "mystery meat" problem of CSS-in-JS with automatically typed styles:

import styles from './theme.knighted-css.js';

<button className={styles.button}>Predictable and Scoped Button</button>;

Key benefits:

Shadow DOM selectors stay type-safe: Predictive autocompletion of Shadow DOM class names.
Encapsulate styles: Avoid global style bleeding between React and other app parts using Shadow DOM isolation.
Maximize component reusability: Use React components both globally and in shadow DOM contexts.
Simplify build tooling: Bypass .tsx quirks, TypeScript decorators, and complex loader setups.

Shadow DOM Embed

Define a component with jsx and export its scoped styles, then consume both via a combined query import:

// components/native_button.js
import { jsx } from '@knighted/jsx/index.js'
import styles from './native_button.knighted-css.js'

export default function Button({ label, onClick }) {
  return jsx`
    <button class="${styles.button}" onClick=${onClick}>
      <span class="${styles.token}">native css</span>
      <span class="${styles.label}">${label}</span>
    </button>
  `
}

import Button, {
  knightedCss as buttonCss,
} from './components/native_button.js?knighted-css&combined'

const host = document.createElement('div')
const shadow = host.attachShadow({ mode: 'open' })
const sheet = new CSSStyleSheet()

sheet.replaceSync(buttonCss)
shadow.adoptedStyleSheets = [sheet]

const handleClick = () => console.log('shadow button tapped')

shadow.append(Button({ label: 'Shadow-scoped button', onClick: handleClick }))
document.body.append(host)

One import gives you both the DOM factory (Button) and the Shadow DOM-ready stylesheet string (knightedCss), so scoped styling stays with the component wherever you mount it.

Build Configuration (Rspack/Webpack)

A minimal module rule setup that wires both loaders together:

export default {
  module: {
    rules: [
      {
        test: /\.[mc]?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@knighted/jsx/loader',
            options: {
              runtime: 'dom', // switch to 'react' when emitting reactJsx templates
              // Docs: https://github.com/knightedcodemonkey/jsx/blob/main/src/loader/README.md
            },
          },
        ],
      },
      {
        resourceQuery: /\?knighted-css(?:&.*)?$/,
        use: [
          {
            loader: '@knighted/css/loader',
            options: {
              moduleGraph: {
                extensions: ['.ts', '.tsx'], // optional: add custom script extensions
              },
              // Docs: https://github.com/knightedcodemonkey/css/blob/main/docs/loader.md
            },
          },
        ],
      },
    ],
  },
}

This keeps JSX transpilation and Shadow-DOM-safe styling in a single place while remaining easy to expand with additional loaders later.

Architectural Summary: Shadow DOM vs Traditional Approaches

The @knighted stack takes a radical but simple approach to modern web development by combining Shadow DOM styling, native tooling, and Rust-powered speed. Below is how it stands apart from traditional frameworks:

Feature	`@knighted` Approach	Traditional Approach
Logic	Native Tagged Templates	Proprietary VDOM / Rust Macros
Styles	Scoped Shadow DOM	Global CSS / CSS-in-JS
Tooling	Oxc / Rust (Ultra-fast)	Babel / SWC (General-purpose)
Type Safety	Plugin-driven Virtual JSX	Standard TypeScript Compilation
Runtime	Thin DOM/SVG Reconciler	Heavy Framework Core

A Toolchain for React-Tier DX with Vanilla-Tier Performance

The @knighted/jsx + @knighted/css stack is the premier choice for developers who want modern web development productivity without compromising on speed or compatibility. It is the "Goldilocks zone" for the web—a high-performance accelerator that resists both proprietary silos and unmanaged manual workflows.

In 2026, the @knighted stack empowers developers to:

Build with true Shadow DOM encapsulation for predictable, isolated styling.
Ship lightweight, standards-compliant applications with ultra-fast build times.
Deliver type-safe, scoped styles for fully portable and reusable CSS.
Transition seamlessly between DOM-first and React-centric workflows.

Ready to adopt the future of web development?

Get Started

Scaffold a new project:

  npx @knighted/jsx init

See the @knighted/css loader docs
Explore the demo app for more examples

References

@knighted/jsx documentation
@knighted/css documentation
See the complete working example Demo App.

AWS Copilot CLI, the Good the Bad, and the Results.

Morgan Ney — Sat, 27 Jan 2024 20:03:11 +0000

Let's face it, deployments of web apps are variable and complex. With so many platforms to deploy to, and opinionated guides on a "best approach", it's easy to spend more time doing research than achieving results. As an experienced web developer and colleague, I feel your pain and understand the dilemma, especially since what is considered BCP today, is also guaranteed to be obsolete in x years as technology continues down its inexorable ascent of progress.

As a developer who'd rather spend more time adding features or fixing bugs than managing configuration around deployments, I was happy to hear about AWS Copilot CLI. If they could come through on their claim I'd be happy.

Focus your time on writing business logic instead of connecting AWS resources.

The Good

AWS Copilot CLI lived up to it's claim, at least in my experience. If you are comfortable working within a CLI and willing to explore the available options and documentation (which is pretty stellar despite my complaints) then you'll be a satisfied customer.

You don't need to learn a particular configuration DSL like CloudFormation to deploy a full-stack web application. Learn the ins-and-outs of Copilot CLI (copilot --help), seek help on their GitHub Issues when necessary, and you'll be deployed on the AWS cloud in no time, and back to adding features to your application.

I would be remiss if I didn't mention that you need to be familiar with concepts like an Application Load Balancer, and Storage Addons, etc., but grasping these basic concepts pales in comparison to learning a new dialect or managing their associated configuration files that evolve with time. The power of the AWS networking infrastructure is at your fingertips and wielded with a few copilot env or copilot svc commands.

The Bad

The Aurora storage options offered with AWS Copilot CLI are expensive, there's no way around it. If you want to use the latest v2 with an engine of PostgreSQL (probably similar with MySQL) you are going to pay a minimum of around $40/mo. Even if your database sits mostly at rest, particularly in a development or staging environment.

Things get a bit better with v1, which can actually scale down to zero, but v1 is EOL this 12/31/2024. I've personally let my feelings be known about this, and it couldn't hurt for others to do the same if you feel similarly slighted in your available offerings.

The Results

The expensive pricing notwithstanding, the service AWS Copilot CLI offers is pretty great. I was able to deploy Busmap with ease, a full-stack web application providing real-time arrival and departure times for bus stops in North and South American transit agencies. Rolling out new deployments is also seamless, things just work.

Overall, I would recommend AWS Copilot CLI.

If you ever need to catch a bus and want to know when your vehicle is arriving, check out Busmap at https://try.busmap.online. It is backed by the security, reliability, and availability of the AWS infrastructure, thanks to AWS Copilot CLI. Busmap source code is hosted on GitHub.

DEV Community: Morgan Ney