Get Started · Tutorial · Sponsor · Discussions
"Do you see it, Edward? Look closely at the stream. For decades, they told us these two souls—HTML and CSS—must live in separate vessels. They called it 'separation of concerns.' I call it a tragedy of fragmentation.
But look now... there is no 'link' tag. There is no 'external stylesheet.' I have spliced the DNA of the structure directly into the spirit of the style. They are no longer two things pretending to be one; they are a Successful Fusion.
It's stable, Edward. It's declarative. It's... beautiful. We've created a Chimera that doesn't just bark—it renders."
npm i -g alchira # If you prefer npm
pnpm add -g alchira # If you prefer pnpm
yarn global add alchira # If you prefer yarn
bun add -g alchira # If you prefer bunAlchira is Framework/language independent. Works in any codebase (uses Node for orchestration)..
- Unified Syntax for CSS + HTML — Structure and style in one place, no context-switching.
- Standardized Syntax for CSS Frameworks — Consistent syntax whether you use built-in or external frameworks.
- Component‑First Design — Scoped composition without JavaScript framework overhead.
- Designer‑Friendly Workflow — Visual-first authoring that compiles to clean production code.
- Personalized Flavors — Native support for CSS framework variants and custom styling systems.
- Scoped Classes by Default — Automatic isolation for predictable, conflict-free styling.
- Compile‑Time Unique ID Hashing — Locally unique identifiers for precise scoping.
- Inline Cascade Control — Fine-grained style override control directly in markup.
- Adaptive CSS Framework — A stylesheet system that scales and evolves alongside your project as it grows.
- Live Component Preview — Isolated component composition with real-time updates.
- Creative Toolbox Philosophy — Not a framework, but a system that flexes around your workflow.
Alchira is currently in a high-intensity stabilization phase.
Before we initiate the next mission, we are refining the core engine.
Our current priority is absolute stability: hunting down edge cases and hardening existing features to ensure a rock-solid foundation.
Alchira is a 100% bootstrapped project.
During the preview period, your support unlocks amazing new capabilities for everyone! 🎉
Note
View the Development Lifecycle
We use a "Cold Forge" protocol: no new features are added until the current ones are stable.
New capabilities are unlocked by community funding.
(Expand to know more about feature release lyfecycle.)
| Phase | Status | Activity |
|---|---|---|
| 1. Forge Stabilization | 🛠️ Active | Hardening current features. No new additions allowed. |
| 2. Target Declaration | 📢 Announced | Bugs are cleared. The next Funding Target is revealed. |
| 3. The Funding Cycle | ⏳ Waiting | The community contributes to reach the financial milestone. |
| 4. Feature Unleash | 🔓 Unlocked | Target met. New features enter the Insider Alpha. |
| 5. The Insider Loop | 🧪 Priority | Previous funders get first access and priority support. |
| 6. Public Shift | 🌍 Public | Features move to a Public Beta for everyone. |
Mission 0: 🎁 Essentials
Composing and Nesting, Inline cascade control, Variants, 1st Order Wrappers,
Dependent tracking.
These feature alone gives you the a CSS framework that work along side your project starting from Zero.
Important
Next Mission Readiness: The next mission remains Locked until all open issues in the current Forge Stabilization phase have been resolved and the funding target is met.
Mission 1: 🖼 Sketchpad
Sketchpad Instant Previews. Faster Workflows.
Stop guessing and start seeing: Sketchpad brings live previews directly into your editor or external browser.
While the built-in toolkit is lean and focused, it is designed to be fully extensible—allowing you to rebuild or customize the interface to suit your specific architectural needs.
Tailored to your stack: Sketchpad comes bundled with your preferred flavor. Unlock additional flavors to unleash the full potential of your development environment and specialized toolsets.
With instant server-side updates for every edit, your feedback loop is now instantaneous. Build faster, debug visually, and stay in the flow.
Mission 2: 📜 (Chained Wrappers & Hashrules) + (Denest)
Precise directives + conditional selectors
Denest: Destructive Nesting is a dedicated operator designed to keep long-chained selectors organized. It's the ultimate CSS power-up for managing complex UI states without losing code clarity.
Multilevel Rule Control: Manage rule states with precision using multilevel wrapping. By centering logic around the symlink, you ensure your styles remain both powerful and predictable.
Hashrules: Reuse & Scale Stop repeating yourself. Configure reusable wrapper snippets in hashrules.jsonc.
- Standardize: Define snippets in
./alchira/hashrules.jsonc. - Sync: Update a single file to reflect changes across your entire project.
Mission 3: 📚 Libraries
Automated Style-Symlinks for Rapid Composition.
Centralized CSS Factories: Bulk-generate class blocks in ./alchira/libraries. Each block is assigned a unique symlink handle, making global styles easy to track, manage, and scale.
Preprocessor Friendly: Start with the Essential symlinks bundled with your flavor, or unleash your own preprocessor to generate custom library sets on the fly.
Deep Architecture: Support for 6 levels of inheritance allows for highly structured design tokens. Use @--apply/+ to merge these library foundations into final HTML component sketches for advanced state management.
Mission 4: 🧩 Advanced Scope Control
Unique IDs, Scoped Classes, and Local Styling.
Better Organization: Utilize local file-scoped symlinks to prevent naming collisions. Only export the symlinks required for the task, keeping your internal logic private.
Collision-Free IDs: Leverage unique file hashes to generate one-of-a-kind class names and IDs automatically.
Sketch Compositions: Effortlessly combine local styles into robust compositions while maintaining strict scope boundaries.
Mission 5: 🍧 Flavours
Build & share custom CSS frameworks on Alchira.
Unified rulesets for team-enforced styling systems. Create immutable libraries, extend Sketchpad features, and ship config blueprints.
- Team Standards → Enforce consistent practices across projects
- Immutable Libraries → Lock core styles, extend safely
- Personalize Sketchpad → Build custom UIs/workflows from your preferred tools
- Config Blueprints → One-click project kickstarts
Why another framework, you ask?...
Not a Css/Js framework. Actually not even a framework.
So what is it then? It's a **major fix for a minor problem**. A problem that always manages to get in the way and turn into a constant source of frustration. A worked on a few a landing pages in vanilla stack and it was not a very pleasent experience HTML/CSS context switching, cascade hell, scoping, style override, i hope i don't have to explain every one did went through those. Then i tried a few frameworks astro, svelte and react(i might get a lot, of hate for this, but react never really got clicked for me). And in addtion to those framework, every time these problems were stacking up as they scale.
Then what is this THING really?...
A little bit of this, a little bit of that — hard to sum up in one word.
That's the tricky part. It lives in this weird intersection between tools we already use. It comes with a **macro system for XML/HTML-like syntax**, but instead of shipping with a mountain of prebuilt classes like typical CSS frameworks, it lets you start from zero — or bring your own if you prefer.There's a standardized syntax for CSS frameworks if you want it, and built-in scoped classes, compile-time unique ID hashing, and inline cascade control. It also offers a CSS framework that grows and adapts with your project, multi-mode stylesheet generation, and isolated component composition with live previews.
It's not a framework in the traditional sense — more like a creative toolbox that bends around your workflow.
When/Where should you use it?...
Whenever you want. Wherever you want. You`re the cowboy in these wilds.
It comes with very few rules — and almost unlimited flexibility. You can make things fast, break things faster, and fix them just as easily. That`s the fun part. It`s meant to feel natural and forgiving — something that lets you explore, not restrict.Personally i used it even for this markdown file.
As for how it ended up like this?...
I was too dumb to learn too many things and hold them all together in my head.
I come from a mixed background — part electronics, part design — and somewhere along that path, I fell into web development. Over time, I realized I didn't have the patience to deal with a dozen disconnected tools just to make one thing work. I wanted something simple: a tool that did what I needed, stayed out of my way, and gave me room to create freely.What began as a tiny npm package for CSS slowly grew past its limits — creeping into HTML and evolving into something more ambitious. But I knew where to stop.
My battlefield was clear enough: HTML and CSS — structure, style, and all the chaos that comes with it.
