Lark

Lark is a Dart web framework with:

• file-based routing
• fine-grained reactivity (ref, computed, effect)
• composables for async/data/storage
• static pre-rendering (SSG)
• server-side rendering (SSR)
• a built-in CLI for scaffolding, dev, and production builds

⚠️ This repository is the public issue tracker for Lark.

Lark is not available for external code contributions as at now.

All development happens privately and is implemented internally by automated AI agents.

Use this repository to:

• Report bugs

• Request features

• Track fixes and releases

For documentation and guides: https://larkstack.com

dart pub add lark

Create a project:

dart run lark create my_app
cd my_app
dart pub get
lark dev

Open http://localhost:3000.

lib/app.dart:

import 'package:lark/lark.dart';
import 'routes.g.dart';

final app = LarkApp(
  routes: routes,
  config: const LarkConfig(name: 'My App'),
  head: const Head(title: 'My App'),
);

web/main.dart:

import 'package:lark/lark.dart';
import 'package:my_app/app.dart';

void main() {
  createApp(app).mount('#app');
}

Set the Tailwind strategy in lib/app.dart (defaults to selector mode):

final config = LarkConfig(
  name: 'My App',
  tailwind: TailwindConfig(darkMode: DarkMode.selector),
);

Use dark: classes in UI and control preference with useDarkMode():

final theme = useDarkMode();
theme.toggle();      // switch dark/light
theme.setSystem();   // follow OS preference

On web, Lark automatically wires storage and system preference detection when the app mounts.

import 'package:lark/lark.dart';

class CounterPage extends Component {
  final count = ref(0);
  late final doubled = computed(() => count() * 2);

  @override
  Component build() {
    return Column([
      Text('Count: ${count()}'),
      Text('Doubled: ${doubled()}'),
      Button(label: 'Increment', onPressed: () => count.value++),
    ]);
  }
}

Lark generates lib/routes.g.dart from lib/pages:

• lib/pages/index.dart -> /
• lib/pages/about.dart -> /about
• lib/pages/blog/__slug__/index.dart -> /blog/:slug

Routes are regenerated by lark dev, lark build, and lark codegen.

• useRouter() for push, replace, back, forward, go
• useRoute() for current path/params/query/meta/data
• useParams() and useQueryParams() helpers
• RouterLink for SPA navigation
• RouterOutlet for nested route trees

final useCounterStore = defineStore('counter', () {
  final count = ref(0);
  final doubled = computed(() => count() * 2);

  void increment() => count.value++;

  return (count: count, doubled: doubled, increment: increment);
});

final form = useForm({
  'email': field(validators: [required, email]),
  'password': field(validators: [required, minLength(8)]),
});

• useFetch, useLazyFetch, usePost
• usePagination, useInfiniteScroll, useAsync, usePolling
• useToggle, useDebounce, useThrottle, usePrevious
• useLocalStorage, useSessionStorage, useCookie, useDarkMode
• useQuery, useMutation, useLazyQuery

• useMeta(...)
• useSeo(...)
• useHead([...])
• app-level Head(...) on LarkApp

Put content files in lib/content (.md, .yaml, .json) and run codegen.

Generated catalog: lib/content/content.g.dart

final posts = await content.query('blog').search('dart').find();
final one = await content.findOne('my-post-slug');

lark create <name>
lark dev [--port] [--verbose] [--ssr]
lark build [--wasm | --js]
lark start
lark serve [--port] [--host] [--dir]
lark generate <component|page|store> <name>
lark codegen
lark doctor
lark clean
lark tailwind setup

lark build

Deploy build/ to static hosting.

Local check:

lark serve

lark build also compiles an SSR server binary:

lark build
lark start

lark start runs build/server (host/port from args or .env).

For source-mode SSR in environments with Dart installed:

cd build
dart pub get
dart run bin/server.dart

Use smaller entrypoints when needed:

• package:lark/core.dart
• package:lark/router.dart
• package:lark/store.dart
• package:lark/seo.dart
• package:lark/composables.dart
• package:lark/ssr.dart
• package:lark/web.dart