Skip to content

# Welcome to AppRun Docs

Welcome to the AppRun user guide! This guide shows you how to get started creating web applications using AppRun.

## What is AppRun?

AppRun is a lightweight JavaScript library for building applications. It has a unique architecture inspired by the Elm architecture.

Use a Counter as an example.

    // define the initial state
    const state = 0;

    // view is a function to display the state
    const view = state => <>
      <h1>{state}</h1>
      <button onclick={()=>app.run('-1')}>-1</button>
      <button onclick={()=>app.run('+1')}>+1</button>
    </>;

    // update is a collection of event handlers
    const update = {
      '+1': state => state + 1,
      '-1': state => state - 1
    };

    // start the app
    app.start(document.body, state, view, update);

Note

Most of the code snippets in this guide are interactive. Try edit and see the results.

- AppRun is lightweight, only 6KB gzipped, but includes state management, rendering, event handling, and routing.

- With only three functions: `app.start`, `app.run`, and `app.on` in its API makes it easy to learn and use. It can be used directly in the browser or with a compiler/bundler like Webpack or Vite.

- One more thing, you can use AppRun with React to simplify state management and routing of your React applications.

## Quick Start

You can choose one of the following options to get started:

- Use AppRun in the browser

  Reference AppRun from CDN and start building your app in no time

  Getting started

- Create an SPA project

  Create a new SPA project using the AppRun CLI

  Create AppRun App

- Use AppRun with React

  Use AppRun with React to simplify state management and routing

  React

- Read More about the architecture

  Understand the architecture of AppRun and how it works

  Architecture

Ready to try it yourself?

Head over to Getting Started or explore the AppRun Architecture.