Build Beautiful Web Apps
With Semantic HTML

A modern JavaScript framework that puts semantic HTML and modern CSS at the forefront. Bootstrap meets Pico CSS with Angular-style ergonomics.

Get Started See Examples
npm install base-native

Why Base Native?

🎨

Classless Styling

Beautiful default styles for all HTML elements. Write semantic HTML, no classes needed.

âš¡

Reactive Signals

Modern reactive state management with signals, computed values, and automatic dependency tracking.

🧩

Component System

Build reusable components with lifecycle hooks and automatic re-rendering.

🎯

TypeScript First

Full TypeScript support with excellent type inference and IDE autocomplete.

🌗

Dark Mode Built-in

Automatic dark mode support based on system preferences. No configuration needed.

📦

Zero Dependencies

Lightweight core with zero runtime dependencies. Under 10KB gzipped.

Back to Web Fundamentals

Modern web development has become overcomplicated. We've lost sight of the web's fundamental strength: semantic HTML and progressive enhancement.

Base Native brings us back to these roots while providing the modern developer experience we've come to expect. Instead of wrestling with utility classes or complex state management, you write clean HTML and simple reactive code.

"Write semantic HTML, style it beautifully by default, and enhance it with reactive JavaScript only when needed."

See It In Action

Semantic HTML, Beautifully Styled

Write standard HTML elements and they look great out of the box. No classes, no configuration, just beautiful defaults. 

<main>
  <h1>Welcome</h1>
  <p>This is automatically styled!</p>
  
  <form>
    <label for="email">Email</label>
    <input type="email" id="email" />
    <button type="submit">Submit</button>
  </form>
</main>

Reactive State Made Simple

Create reactive signals that automatically track dependencies and update the UI. No boilerplate, no complex APIs. 

import { signal, effect } from 'base-native';

const count = signal(0);

effect(() => {
  console.log(`Count: ${count.value}`);
});

count.value++; // Logs: "Count: 1"

Build Powerful Components

Create reusable components with lifecycle hooks, automatic re-rendering, and built-in state management. 

class Counter extends Component {
  private count = signal(0);
  
  constructor() {
    super({
      template: () => `
        <article>
          <h3>Count: ${this.count.value}</h3>
          <button id="inc">+</button>
        </article>
      `
    });
  }
  
  onMount() {
    this.autoRender(this.count);
    this.element
      .querySelector('#inc')
      .addEventListener('click', () => {
        this.count.value++;
      });
  }
}

Get Started in Minutes

1

Install

npm install base-native
2

Include CSS

<link rel="stylesheet" href="base-native/dist/base-native.css">
3

Build

import { signal, Component } from 'base-native';

Documentation

Ready to Build Something Beautiful?

Start using Base Native today and rediscover the joy of web development.

View on GitHub NPM Package