Build modern web apps
the simple way

BoltJS is a lightweight JavaScript framework that's as easy to learn as jQuery, but powerful enough for modern web applications. No build tools required.

Get Started View Guide
~20KB
Minified
0
Dependencies
30s
To First Component

Why BoltJS?

📦

Everything in One File

All you need is a single JavaScript file (~20KB). No npm, no webpack, no complicated setup.

⚡

Zero Build Tools

Just a text editor and a browser. Write code and see it run instantly. No compilation step.

🎯

Easy to Learn

If you know JavaScript, you already know BoltJS. Create your first component in 30 seconds.

🧩

Component-Based

Build applications using reusable, encapsulated components with their own state and behavior.

🔌

Seamless Integration

Drop it into any existing HTML page. Perfect for progressive enhancement.

🚀

SEO-Friendly

Supports server-side rendering (SSR) for better search engine visibility and performance.

Get Started in Seconds

1

Include BoltJS

Add a single script tag to your HTML:

<script src="https://cdn.jsdelivr.net/gh/stormmoredev/bolt-js-framework@latest/dist/bolt.min.js"></script>
2

Create a Component

Write your first component:

<x-counter>
  <button x-click="increment">Click me</button>
  <div>Count: {{count}}</div>
</x-counter>

<script>
  function Counter(self) {
    self.count = 0;
    self.increment = () => self.count++;
  }
  $(Counter);
</script>
3

That's It!

Open your HTML file in a browser. Your component is live and reactive!

Try It Live - TODO App

See BoltJS in action! This is a real, working TODO list built with just a few lines of code.

📝 Total: {{count}} ✅ Done: {{done}} ⏳ Left: {{left}} 
<x-todo-form>
  <input type="text" placeholder="Add a new task..."
         value="{{todo}}" x-enter-pressed="add"/>
  <button x-click="add">Add Task</button>
</x-todo-form>

<x-todo-list>
  <div>Total: {{count}} | Done: {{done}} | Left: {{left}}</div>
  <div x-list="items"></div>
</x-todo-list>
function TodoItem(self, name) {
  self.name = name;
  self.done = false;

  self.delete = () => self.emit('del-todo', self);
  self.changed = () => {
    self.done = !self.done;
    self.emit('task-changed');
  };

  self.template = `
    <div class="todo-item">
      <input type="checkbox" x-change="changed" />
      <div x-class="done:done">{{name}}</div>
      <button x-click="delete">Delete</button>
    </div>`;
}

function TodoForm(self) {
  self.todo = "";
  self.add = () => {
    if (!self.todo) return;
    self.emit("new-todo", self.todo);
    self.todo = "";
  }
}

function TodoList(self) {
  self.items = new WatchList([]);
  self.left = self.done = self.count = 0;

  self.countTasks = () => {
    self.count = self.items.count();
    self.done = self.items.count(x => x.done);
    self.left = self.count - self.done;
  };

  self.on('new-todo', todo => {
    self.items.add($(TodoItem, todo));
    self.countTasks();
  });
  self.on('del-todo', todo => {
    self.items.delete(x => x === todo);
    self.countTasks();
  });
  self.on('task-changed', self.countTasks);
}

$([TodoForm, TodoList, TodoItem]);

See It in Action

Todo List

A complete todo application with add, delete, and toggle functionality.

View Demo →

Modal Dialog

Reusable confirmation modal with dynamic content and event handling.

View Demo →

Form Binding

Two-way data binding with forms and real-time validation.

View Demo →

Dynamic Lists

Reactive lists with WatchList for automatic DOM updates.

View Demo →
View Full Guide

Ready to build something amazing?

Start creating modern web applications without the complexity of traditional frameworks.

Read the Guide View on GitHub