Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

AppRun Build NPM version Downloads License twitter Discord Chat

AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components.

// define the application state
const state = 0;

// view is a pure function to display the state
const view = state => `<div>
  <button onclick="'-1')">-1</button>
  <button onclick="'+1')">+1</button>

// update is a collection of event handlers
const update = {
  '+1': state => state + 1,
  '-1': state => state - 1
app.start(document.body, state, view, update, { transition: true });

Note, the transition option is newly added to enable the View Transition API during the rendering of the view.

AppRun Benefits

  • Clean architecure that needs less code
  • State management and routing included
  • No proprietary syntax to learn (no hooks)
  • Use directly in the browser or with a compiler/bundler
  • Advanced features: JSX, Web Components, Dev Tools, SSR, etc.

Getting Started

AppRun is distributed on npm. To get it, run:

npm install apprun

You can also load AppRun directly from the CDN:

<script src=""></script>
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello AppRun', view);

Or, use the ESM version:

<script type="module">
  import { app } from '';
  const view = state => `<div>${state}</div>`;
  app.start(document.body, 'hello ESM', view);

Or, you can create an AppRun app by using the npm create apprun-app command.

npm create apprun-app [my-app]

Component and Web Component

An AppRun component is a mini-application with elm architecture, which means inside a component, there are state, view, and update. In addition, components provide a local scope.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
app.render(document.body, <Counter/>);

You can convert AppRun components into web components/custom elements. AppRun components become the custom elements that also can handle AppRun events.

class Counter extends Component {
  state = 0;
  view = state => {
    const add = (state, num) => state + num;
    return <>
      <button $onclick={[add, -1]}>-1</button>
      <button $onclick={[add, +1]}>+1</button>
app.webComponent('my-app', Counter);
app.render(document.body, <my-app />);

All the Ways to Make a Web Component - May 2021 Update compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.

Learn More

You can get started with AppRun Docs and the AppRun Playground.

AppRun Book from Apress

Order from Amazon


You can launch the webpack dev-server and the demo app from the demo folder with the following npm commands:

npm install
npm start

You can run the unit tests from the tests folder.

npm test

Unit tests can serve as functional specifications.

Finally, to build optimized js files to the dist folder, just run:

npm run build

Have fun and send pull requests.



AppRun is an MIT-licensed open source project. Please consider supporting the project on Patreon. 👍❤️🙏

Thank you for your support

  • Athkahden Asura
  • Alfred Nerstu
  • Gyuri Lajos
  • Lorenz Glißmann
  • Kevin Shi
  • Chancy Kennedy



Copyright (c) 2015-2022 Yiyi Sun