Getting started

Create a starter application with crykit init, then run it with source watching. For a smaller example built by hand, see Minimal application.

Prerequisites

Requirement	Details
macOS	The supported application platform; Linux and Windows lack required native resource loading
Crystal 1.21.1+ and Shards	Compile Crystal code and install dependencies
make and native build tools	On macOS, install the Xcode Command Line Tools; see the bundled engine prerequisites

CryKit includes its WebView engine and browser runtime. Installing the shard builds native code automatically. Application development does not require Node.js.

Install the CLI

Build the crykit executable from a source checkout:

git clone https://github.com/AristoRap/crykit.git
cd crykit
shards install
shards build
export PATH="$PWD/bin:$PATH"
crykit --version
cd ..

The PATH change applies to the current shell. Add the absolute path to the checkout's bin directory to your shell configuration to keep it available.

Create an application

From the directory where you keep your projects:

crykit init my_app
cd my_app
shards install
crykit dev --watch

init creates a complete starter with a view, ECR template, layout, stylesheet, routes, a native window, and macOS packaging files.

Edit	File
View state and callbacks	src/views/index.cr
Interface markup	src/views/templates/index.ecr
Styles	src/assets/main.css
Routes	src/handlers/app_handler.cr
Window, menus, and assets	src/application/app.cr
App name, entry, and bundle metadata	crykit.yml

dev --watch applies eligible CSS and template edits while the app runs. Other source changes rebuild and restart it. See the CLI reference for all commands and options.

After closing the application, build an executable or macOS bundle:

crykit build --release
crykit dist

The outputs are bin/my_app and dist/MyApp.app. See Distribution for packaging metadata and customization.

Minimal application

This optional manual setup builds a small counter without installing the CLI. Create a new project directory, for example counter-app/. In counter-app/shard.yml, declare CryKit as the only dependency:

name: counter_app
version: 0.1.0

dependencies:
  crykit:
    github: AristoRap/crykit

For local framework development, replace github: AristoRap/crykit with path: ../crykit, adjusting the path relative to your application's shard.yml.

Save the following as counter-app/src/app.cr. Configure routes, assets, and initial windows before Application#run.

require "crykit"

class Counter
  include CryKit::View

  reactive count : Int32 = 0

  template "counter"
end

app = CryKit::Application.new
app.routes.draw do
  get "/" do
    mount Counter.new
  end
end
app.windows.create(id: :main, title: "Counter", path: "/")
app.run

Save counter-app/src/counter.ecr beside app.cr:

<main>
  <p>Count: <%= reactive.count %></p>
  <button on_click=<%~ -> { reactive.count += 1 } %>>Increment</button>
</main>

template "counter" resolves counter.ecr relative to the declaring Crystal source file. The .ecr extension is optional. ECR expressions can access the view's state and helper methods. HTML stays in the ECR file; state, callbacks, and application capabilities stay in Crystal.

From counter-app/, install and run:

shards install
crystal run src/app.cr

The view instance retains reactive.count. Its callback changes the reactive value, and CryKit reevaluates the text binding that read it. The resulting text mutation is sent to the webview without reconstructing the template. See compiled HTML templates for attributes, string bindings, conditional regions, keyed lists, and composition.

Next steps

Read Views and Compiled templates to build your interface, then Application to configure routes, assets, and lifecycle. Explore the example applications, or use the CLI reference for development and build commands.