Snapp Kit

A simple build tool for Snapp Framework

Live server powered by @compodoc/live-server

Table of Contents

• What is Snapp Kit?
• Quick Start
• Commands
• Troubleshooting

What is Snapp Kit?

Snapp Kit compiles your JSX/TSX files to vanilla JavaScript. Simple as that.

What it does:

• Compiles JSX/TSX to JavaScript (powered by esbuild)
• Live server with auto-refresh during development
• Creates page templates instantly

What is Snapp? - A lightweight JavaScript framework. Learn more →

Quick Start

Recommended: Create New Project

npm create snapp-app my-app

cd my-app
npm run snapp

Open http://localhost:9000 - Done!

Why use this?

• No global installation needed
• Everything set up automatically
• Works on any machine
• Perfect for team projects

Alternative: Global Installation

For personal projects or if you want the CLI everywhere:

npm install -g snapp-kit

# For macOS/Linux
sudo npm install -g snapp-kit

Then use:

snapp create my-app

cd my-app
snapp build -W

Commands

Note: If you used npm create snapp-app, add prefix commands with npx (e.g., npx snapp build -W)

npm create snapp-app <name>

Creates a new project with everything configured.

npm create snapp-app my-project

cd my-project
npm run snapp

Creates:

my-project/
├── views/
│   └── index.jsx      # Your JSX files
├── src/
│   ├── index.js       
│   └── snapp.js       # Snapp runtime
└── index.html         # HTML

snapp create <name>

Creates a new project

snapp create my-project

cd my-project
snapp build -W

snapp page <name>

Generates a new page (HTML + JSX). Must be run inside project directory.

With npm create snapp-app:

cd my-project
npx snapp page contact

With global installation:

cd my-project
snapp page contact

Creates:

• contact.html - HTML template
• views/contact.jsx - JSX component

snapp build [options]

Compiles JSX/TSX files from views/ to src/.

snapp build          # Build once
snapp build -W       # Build + watch + live server
snapp build -M       # Build minified
snapp build -W -M    # Watch + live server + minify

Options:

| Flag | Long | Description | |------|------|-------------| | -E | --entry | Project folder (e.g., -E MyApp) | | -W | --watch | Watch mode + live server | | -M | --minify | Minify output | | -P | --port | Server port (default: 9000) |

When to use -E:

Inside your project - no -E needed:

cd my-project
snapp build -W

Outside your project - use -E:

snapp build -W -E my-project

snapp --version | snapp -V

Check installed version:

snapp --version
snapp -V

snapp --help

Show all available commands:

snapp --help

How It Works

Snapp Kit compiles your files using esbuild:

views/index.jsx   →  src/index.js
views/about.tsx   →  src/about.js

Supported files: .jsx, .tsx, .ts, .js

Watch mode:

• Starts live server on port 9000
• Rebuilds when files change
• Refreshes browser automatically

Troubleshooting

Command not found

For npm create:

npm --version  # Check npm version (need 6+)

For global installation:

npm install -g snapp-kit
snapp --version

For npx commands:

cd my-project
npx snapp --version

Files not compiling

Check your folder structure:

ls views/*.jsx   # Verify files exist

Then build:

snapp build -W

Port already in use

snapp build -W -P 8080

Permission errors (Linux/Mac)

sudo npm install -g snapp-kit

Or use npm create snapp-app (no sudo needed!)

Why Snapp Kit?

• Simple - One command to build
• Fast - Powered by esbuild
• Flexible - Global or per-project

Snapp Kit v3

Install Now • Snapp Framework • GitHub