Semantic HTML, natively reactive

BaseNative brings Angular-inspired control flow to native template elements with a small runtime core, server rendering, and CSP-safe template evaluation. The examples in this repo still use standard workspace tooling.

• CSP-safe + keyed runtime direction
• Nx + esbuild workspace tooling
• render + markers ssr mode
• 0 virtual DOM nodes

Features

Everything you need to build reactive server-rendered interfaces.

• @if / @else conditional rendering done
• @for list rendering with track done
• @switch state matching done
• Signal-based reactivity done
• Server-side rendering done
• Client hydration done
• Expression binding (:attr, @event) done
• SSR + hydration example done

How it works

Write standard HTML with template directives. BaseNative handles the rest — server-side or client-side.

<button @click="incrementCount()">
  Clicked  times
</button>

<script type="module">
  import { signal, hydrate } from 'basenative';
  const count = signal(0);
  function incrementCount() { count.set(count() + 1); }
  hydrate(document.body, { count, incrementCount });
</script>

// server.js
import { render } from 'basenative/server';

app.get('/', (req, res) => {
  const html = render(`
    <template @for="user of users">
      <li></li>
    </template>
  `, { users });
  res.send(html);
});

Recent updates

• Initial proof of concept complete 2025-01-15
• Server renderer implemented 2025-02-01
• Express example with SSR + hydration 2025-02-15
• Signals playground added 2025-03-01
• API documentation page 2025-03-15