{"_id":"@cixzhang/brownie","name":"@cixzhang/brownie","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@cixzhang/brownie","version":"0.2.0","description":"Markup-first web component library with zero-build, Shadow DOM, and SSR with Declarative Shadow DOM","type":"module","main":"src/index.js","exports":{".":"./src/index.js","./ssr":"./src/ssr.js","./ssr/hydrate":"./src/hydrate.js","./components/*":"./src/components/*","./utils/html":"./src/utils/html.js","./utils/interactive":"./src/utils/interactive.js","./styles/base.css":"./src/base.css","./styles/theme.css":"./src/theme.css","./registry.json":"./src/registry.json"},"scripts":{"test":"web-test-runner tests/**/*.test.js --node-resolve","test:watch":"web-test-runner tests/**/*.test.js --node-resolve --watch","typecheck":"tsc"},"keywords":["web-components","custom-elements","shadow-dom","ssr","declarative-shadow-dom","server-side-rendering","markup-first","zero-build","design-system"],"license":"MIT","author":{"name":"Cindy Zhang"},"repository":{"type":"git","url":"git+https://github.com/cixzhang/brownie.git"},"homepage":"https://github.com/cixzhang/brownie#readme","bugs":{"url":"https://github.com/cixzhang/brownie/issues"},"engines":{"node":">=18.0.0"},"devDependencies":{"@esm-bundle/chai":"^4.3.4","@web/test-runner":"^0.18.0","prettier":"^3.8.0","typescript":"^5.9.3"},"gitHead":"2e93476c9d4dbb6c6de7af87002544a622db4f10","_id":"@cixzhang/brownie@0.2.0","_nodeVersion":"25.6.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-2hTuyQxBoUpz7HuDzG8oyjV7oS9dmQVztKphN0n1olVsAjctmHtrVo+OKgQ0TUb0pfaHdP8saw2CoKlO7knxwg==","shasum":"e4ad089cd1fb6bd9af533629255913b4a761b460","tarball":"https://registry.npmjs.org/@cixzhang/brownie/-/brownie-0.2.0.tgz","fileCount":33,"unpackedSize":201620,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDPeVDBubW7jrSw0P8QvqiwGqQ0cI+IygLl+oktt8APkAiAWXW7/VQGvP6XH12VY4zy25oVOnj8aXnhXuiTCw+gvsQ=="}]},"_npmUser":{"name":"cixzhang","email":"cixzhang@gmail.com"},"directories":{},"maintainers":[{"name":"cixzhang","email":"cixzhang@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/brownie_0.2.0_1785108723656_0.734715681985368"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-26T23:32:03.463Z","0.2.0":"2026-07-26T23:32:03.813Z","modified":"2026-07-26T23:32:04.122Z"},"maintainers":[{"name":"cixzhang","email":"cixzhang@gmail.com"}],"description":"Markup-first web component library with zero-build, Shadow DOM, and SSR with Declarative Shadow DOM","homepage":"https://github.com/cixzhang/brownie#readme","keywords":["web-components","custom-elements","shadow-dom","ssr","declarative-shadow-dom","server-side-rendering","markup-first","zero-build","design-system"],"repository":{"type":"git","url":"git+https://github.com/cixzhang/brownie.git"},"author":{"name":"Cindy Zhang"},"bugs":{"url":"https://github.com/cixzhang/brownie/issues"},"license":"MIT","readme":"# Brownie\n\n**A VanillaJS UI kit for the modern web**\n\nBrownie is a native web component system for generating polished interfaces in pure HTML/JS/CSS. No dependencies. No build. No packaging. No libraries. Built to be close to the metal and easy to generate from data on your backend or from AI workflows.\n\nLike the helpful household spirits of folklore, Brownie components work quietly in the background — small, unobtrusive, and reliable.\n\n**NOTE:** Brownie is highly experimental and I'm still playing around with the APIs. It is possible to pull a specific\nversion and just have it copied and stored if something stable is necessary. Before using this library, please carefully\nread the Browser Support section.\n\n---\n\n## Why Brownie?\n\nMost UI libraries are built for JavaScript-first, framework-heavy environments. They assume you'll set properties imperatively, manage state in JS, and treat the DOM as an output target rather than a source of truth.\n\nBrownie takes a different approach:\n\n- **Markup-first** — configure components through HTML attributes and child elements\n- **Data lives in the DOM** — inspect your UI and see your data, not an empty shell waiting for JS\n- **Backend and AI friendly** — generate complete, working interfaces from any language or LLM\n- **Zero build step** — drop in a script tag and go\n\nBrownie is built with backend rendering and AI interactions in mind.\nIt tries to achieve a DOM that can be fully observed to provide dense information\nabout your application and allow machines to understand everything from structure,\ndata, appearance, semantics, and capabilities just from reading the DOM and HTML files.\n\n- **Declarative configuration** — no imperative JS required for most UIs\n- **Minimal template syntax** — just `{{property}}` bindings and optional formatters\n- **Attribute-driven** — all state is visible in the markup\n- **Predictable output** — same inputs always produce the same DOM\n\n---\n\n## Core Principles\n\n### Data in the DOM\n\nWe lean into HTML's natural model of keeping data in the DOM. This makes it easy to:\n\n- **Generate HTML from data** — your backend or AI outputs markup, not JS\n- **Inspect state** — open devtools and see exactly what data exists\n- **Understand semantics** — the HTML tells you what's there\n\n```html\n<!-- The data is right here, not hidden in JS state -->\n<brow-table>\n  <brow-table-header name=\"Name\" role=\"Role\" status=\"Status\"/>\n  <brow-table-row name=\"Alice\" role=\"Admin\" status=\"active\"/>\n  <brow-table-row name=\"Bob\" role=\"Editor\" status=\"pending\"/>\n</brow-table>\n```\n\n### Full Theming\n\nBrownie components can be fully themed using pure CSS. No special syntax,\nno token APIs — just the CSS you already know. Web components have style encapsulation\nso Brownie components can also expose a public API for themes using `::part()`.\n\nTo create a new theme, start with cloning one of the example themes then modify as\nneeded. Refer to component documentation for style-able parts.\n\n* [base.css](https://github.com/cixzhang/brownie/blob/main/src/base.css): Minimal base theme\n* [brownie.css](https://github.com/cixzhang/brownie/blob/main/docs/brownie.css): Brownie documentation theme with 3D buttons\n* [technical.css](https://github.com/cixzhang/brownie/blob/main/docs/technical.css): Serious technical theme with monospace fonts\n* [vibes.css](https://github.com/cixzhang/brownie/blob/main/docs/vibes.css): Fun vibes theme with rainbow gradients\n\nThemes use CSS `light-dark` to set colors that switch between light and dark mode.\nThe theme control is handled by `base.css` by applying `color-scheme` to `:root`.\nBrownie sets `color-scheme: light dark` to enable OS preference for light and dark modes,\nthen the `data-theme` attribute on the `<html>` can be used to control for specific modes.\n\n```html\n<!-- Use OS preference by default -->\n<html>\n\n<!-- Explicitly set dark theme -->\n<html data-theme=\"dark\">\n\n<!-- Explicitly set light theme -->\n<html data-theme=\"light\">\n```\n\n### Progressive Complexity\n\nSimple things stay simple. Complex things are possible.\n\n```html\n<!-- Zero config: columns inferred from first row -->\n<brow-table>\n  <brow-table-row name=\"Alice\" age=\"34\"/>\n  <brow-table-row name=\"Bob\" age=\"28\"/>\n</brow-table>\n\n<!-- Add a header for explicit column control -->\n<brow-table>\n  <brow-table-header name=\"Name\" age=\"Age\" status=\"Status\"/>\n  <brow-table-row name=\"Alice\" age=\"34\" status=\"active\"/>\n  <brow-table-row name=\"Bob\" status=\"pending\"/>  <!-- sparse rows are fine -->\n</brow-table>\n\n<!-- Add column elements only where you need custom rendering -->\n<brow-table>\n  <brow-table-header name=\"Name\" status=\"Status\"/>\n  \n  <brow-table-column field=\"status\">\n    <brow-badge variant=\"{{statusColor}}\">{{status}}</brow-badge>\n  </brow-table-column>\n  \n  <brow-table-row name=\"Alice\" status=\"active\" statusColor=\"success\"/>\n</brow-table>\n```\n\n---\n\n## Getting Started (TODO)\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <!-- Base reset and functional styles for Brownie -->\n  <link rel=\"stylesheet\" href=\"https://cdn.example.com/brownie@1.0.0/brownie-base.css\">\n  <!-- Base theme - replace this with your custom theme! -->\n  <link rel=\"stylesheet\" href=\"https://cdn.example.com/brownie@1.0.0/brownie-theme.css\">\n  <!-- Brownie index includes all components and core -->\n  <script src=\"https://cdn.example.com/brownie@1.0.0/brownie.js\"></script>\n</head>\n<body>\n  <script>\n    // Wait for the ready method to clear for component registration and theme injection\n    // before showing the page to avoid the flash of unstyled content.\n    await Brownie.ready();\n  </script>\n\n  <brow-card>\n    <h2>Welcome</h2>\n    <p>Your first Brownie interface.</p>\n    <brow-button variant=\"primary\">Get Started</brow-button>\n  </brow-card>\n</body>\n</html>\n```\n---\n\n## Local Development\n\nBrownie has no build step, so any static file server with live reload works.\n\n**VS Code**\n\nInstall the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension, then right-click your HTML file and select \"Open with Live Server\".\n\n**Command line**\n\n```bash\n# Using npx (no install required)\nnpx live-server\n\n# Or browser-sync for more options\nnpx browser-sync start --server --files \"**/*.html, **/*.css, **/*.js\"\n```\n\n**Python**\n\n```bash\npip install livereload\nlivereload .\n```\n\n---\n\n## Browser Support\n\nBrownie is experimental and brand new in 2026 and leverages the latest browser technologies to achieve\na zero build, zero library core. It has limited browser support.\n\nFor example, Brownie uses CSS Anchor Positioning for menus and hovercards which are yet to be baseline.\nYou may need additional polyfills for the latest browser features if you want to support older browsers.\n\nFor Brownie, we can choose baseline features for the current year and features that have Working Drafts\nor Living Standards.\n\n* Shadow DOM is baseline\n* `light-dark` is baseline 2024\n* CSS Anchor Positioning is in Working Draft\n\n---\n\n## License\n\nMIT\n\n---\n\n*Named for the helpful household spirits of Scottish folklore who quietly do good work while no one is watching.*\n","readmeFilename":"README.md","_rev":"1-bdb7059d613be02986ab47b2a11b1c4e"}