Alchira is a compile-time WebUI workbench that lets you design, preview, and evolve web UI without locking you into a framework or runtime.

It produces plain HTML and CSS — no client runtime, no JS API, no magic in production.

What it changes is how you author UI.

As projects grow, CSS tends to break down:

• Styles leak across components
• Refactors feel risky
• Variants and responsive logic scatter across files
• Cascade rules become implicit and fragile
• You stop trusting your own styles

Alchira is built for the opposite goal:

Make UI changes predictable, local, and reversible.

If your UI changes often — redesigns, theming, refactors, experiments — Alchira is for you.
If you’re happy shipping throwaway styles fast, you probably don’t need it.

Not:

• a CSS framework
• a JS framework
• a runtime library
• a replacement for React, Vue, or Svelte

But:

• a language layer that unifies structure and styling
• a Workbench for designing UI systems safely

You write intent once. Alchira compiles it into clean, optimized CSS and standard HTML.

Structure and style belong together — and should be changed together.

Instead of scattering intent across templates, CSS files, and config, Alchira lets you declare what a component is and how it behaves visually in one place.

Alchira is intentionally progressive.

You can use it:

• just for utility classes
• just for scoped component styles
• just for safer variants
• or as a full UI workbench with live previews

Stop at any point. Everything still compiles to standard CSS.

• Unified HTML + CSS authoring — no context switching
• Scoped styles by default — fewer leaks, safer refactors
• Explicit cascade control — no selector guessing
• Variants and responsive logic where components are used
• Compile-time isolation — no runtime cost
• Editor-native workflows — preview, inspect, and navigate instantly

If this sounds like something you’ve been missing, continue below. If not — that’s okay. Alchira is intentionally opinionated.

⬇️ Start simple. Add power only when you need it.

Some tags starts with \< as escape charector for tags, in the following examples.

Use ~ to trigger class loading in place:

\<div class="~flex ~flex-col"> {{content}} </div>
<script>
  const classnames = ["\~flex","\~flex-col"]
</script>

Provided that these classes are either available in libraries, or defined atlease once.
Using ~ trigger avoids colltion with other desing systems.
Using \~ trigger to load classnames outside html tags.

Use $ for local scope:

\<button 
class="~$button-1" 
_$button-1="
  padding: 1rem; 
  background: blue;
">
  {{content}}
</button>

That's it. Styles with structure. No separate CSS file. Reusable in same file.

<button class="~$button">

Alternatively compose like utility classes and add custom attrubutes later.
Use CSS like nesting for for states control.

\<div 
class="~$button-3" 
_$button-3="
  + p-4 bg-blue; 
  &:hover { scale: 1.01; }
">
  {{content}}
</div>

Add $$ for global scope:

\<div class="~$$button" _$$button="padding: 1rem; background: blue;">
  Click me
</div>

Now its reusable accross project.

Add prefix as group identifier

\<div class="~group$$button" group$$button="padding: 1rem; background: blue;">
  Click me
</div>

Autosuggestions collects these in to separate groups and make navigation easier.

Declare varients using attribute selectors like native CSS.

\<div class="~L5$$button" varient-1 L5$$button="
    --bg-color: blue;
    padding: 1rem; 
    background: var(--bg-color);
    &[varient-1] { --bg-color: red; }
    &[varient-2] { --bg-color: green; }
" &="Add Comments like this.">
  Click me
</div>

Variables are exposed in tooltips for along with the comments, if hovered over it.

Extend using attribute selectors like native CSS.

\<div class="~L5$$button L6$extend-localy" varient-3 L6$extend-locally="
    &[varient-3] { --bg-color: yellow; }
    &[varient-4] { --bg-color: cyan; }
">
  Click me
</div>

The exposed variables will assit in providing the contract by existing classes.

\<div class="L7$style" L7$style="color: black;"
{@media (min-width: 620px)}&="color: red;"
>
  Click me
</div>

will be compiled to

.L7$style {
    color: black
}

@media (min-width: 620px) {
    .L7$style {
        color: red;
    }
}

You can even chain multiple queries with: {Query}&{.parent-class}&{[varient-state]}&="..." This replaces writing media queries and state control like theme-switching.

• ~ for utilities (basic)
• + for components (stricter overides)
• = for overrides (final overides)

Multiple declarations will be used for establish the organizaion of classes in while resolving inline classes. but it will help in the long run

Use <sketch> </sketch> tag

<!-- # will get replaced by a unique hash -->
<div id="_8j_8h_id" class="_8j_8h_class">...</div>
<script>
  // Reuse the hash id's by prefixing with "\#"
  const id = "_8j_8h_id"
  const classname = "_8j_8h_class"
</script>

Needs configs to be properly configured

Use <sketch> </sketch> tag

\<sketch L10$preview>
    <div>
        <h1> Heading </h1>
        <p> {{contents}} </p>
        <button> Select </button>
    </div>
</sketch>

These components can be previewed in your editor webview, with live output

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 bun

Alchira is Framework/language independent. Works in any codebase (uses Node for orchestration)..

Continue to Guide →