Appspace

A modular web framework for building IDE-like applications with a plugin architecture, AI integration, and workspace management.

Demo app: https://app.kispace.de

Docs: https://app.kispace.de/docs/

---

Used by

Downstream domain-specific apps:

geo!space — geospatial workflows (WebGIS): https://geo.kispace.de

neuro!space — neuroimaging workflows: https://neuro.kispace.de

---

Screenshots

IDE layout (dark)

Dashboard (dark)

Dashboard (light)

Extensions

Notebook with Python

---

Architecture

Layers

┌─────────────────────────────────────────────────────────────┐
│  Applications (packages/app, or custom apps)                 │
│  – AppDefinition: id, extensions, contributions, render     │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  App Loader (core)                                          │
│  – App registration & lifecycle  – Extension enable/disable │
│  – Contribution registration     – Render app root         │
└─────────────────────────────────────────────────────────────┘
                              │
        ┌─────────────────────┼─────────────────────┐
        ▼                     ▼                     ▼
┌───────────────┐   ┌─────────────────┐   ┌───────────────┐
│  Extensions   │   │  Contributions   │   │   Commands    │
│  Registry     │   │  Registry       │   │   Registry    │
│  (per-app)    │   │  (tabs, toolbars)│   │   (handlers)  │
└───────────────┘   └─────────────────┘   └───────────────┘
        │                     │                     │
        └─────────────────────┼─────────────────────┘
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  UI (core)                                                   │
│  k-standard-layout · k-tabs · k-toolbar · k-filebrowser · …    │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  Core services                                               │
│  Workspace · Settings · Editor registry · Tasks · Events · DI│
└─────────────────────────────────────────────────────────────┘

Monorepo layout

Path	Role
packages/core (@kispace-io/core)	Platform: registries, services, parts, widgets, dialogs, default UI contributions. No extension logic; extensions are separate packages.
packages/extension-*	One package per extension (e.g. extension-ai-system, extension-settings-tree, extension-monaco-editor). Each depends on core and registers commands/contributions/editors.
packages/app	Default app: imports core + extensions, defines AppDefinition and extensions[], registers with app loader. Use as template for your own app.
Root	Workspace root. Scripts: dev, build, build:app, test.

Main concepts

• Apps — Implement AppDefinition: id, name, version, extensions[], optional contributions, render (string tag, { tag, attributes }, or Lit template), initialize / dispose.
• Extensions — Register with extensionRegistry; provide a loader that runs when the extension is enabled. Register commands, contributions, editors, services.
• Contributions — Declarative UI: tabs (sidebars, editor area), toolbar buttons, HTML blocks. Targets include SIDEBAR_MAIN, SIDEBAR_AUXILIARY, TOOLBAR_MAIN_RIGHT, TOOLBAR_BOTTOM_END, etc.
• Commands — Id + handlers (with optional canExecute). Toolbar/menus reference commands; AI and command palette can execute them.

---

How to get started

Prerequisites

• Node.js 18+
• npm or pnpm

Run the default app

git clone https://github.com/kispace-io/appspace.git
cd appspace
npm install
npm run dev

This builds core, then starts the default app (Vite dev server). Open the URL shown in the terminal (e.g. http://localhost:5173).

Build for production

npm run build        # build core only
npm run build:app    # build the default app (depends on core)

Create your own app

1. Use packages/app as a template: copy it or add a new workspace package.
2. In your app entry (e.g. main.ts):
   • Call applyAppHostConfig({ packageInfo, marketplaceCatalogUrls }) if you use marketplace.
   • Import the extensions you need (@kispace-io/extension-*).
   • Call appLoaderService.registerApp(appDefinition, { autoStart: true }).
3. App definition — Minimal example (no Lit in app):

import { appLoaderService, type RenderDescriptor } from '@kispace-io/core';

appLoaderService.registerApp({
  id: 'my-app',
  name: 'My App',
  version: '1.0.0',
  extensions: ['@kispace-io/extension-command-palette', '@kispace-io/extension-settings-tree', '@kispace-io/extension-ai-system'],
  render: { tag: 'k-standard-layout', attributes: { 'show-bottom-panel': 'true' } } satisfies RenderDescriptor,
}, { autoStart: true });

4. Add the app package to the root package.json workspaces and run npm run dev from the app package or via root scripts.

---

Technology stack

• Lit — Web components (core and extensions)
• TypeScript — Typed API
• WebAwesome — UI primitives
• Monaco — Code editor (extension)
• Vite — Build and dev server

Other extensions add: Pyodide, WebLLM, RxDB, Xenova transformers, etc.

---

Comparison with other frameworks

For those comparing frameworks, here is how Appspace lines up with Angular, React, and Vue on common dimensions.

Dimension	Appspace	Angular	React	Vue
Paradigm	App framework for IDE-like and dashboard-like apps; declarative contributions (tabs, toolbars, commands)	Full framework; components + services + modules	Library; components + hooks	Progressive framework; SFCs + composition API
Component tech	Lit web components (k-* custom elements)	Angular components (decorators/templates)	JSX/TSX components	Single-File Components (.vue) or JSX
Templating	Lit html tagged templates	HTML-like templates + directives	JSX	HTML-like template or JSX
TypeScript	First-class; strict, declarations published	First-class; full TS support	Supported (TS + React types)	First-class; full TS in SFC and script
State management	@lit-labs/signals in core; watchSignal(); signals for app state (active part, editor, selection, tasks)	RxJS + services; optional NgRx/Akita	useState/useReducer; ecosystem (Redux, Zustand, Jotai)	reactivity (ref, reactive); Pinia optional
Routing / Navigation	No URL router; contribution targets and slots (IDE: sidebars/editor/panel; dashboard: custom shell + views)	Angular Router (URL-based, lazy loading)	React Router (community); URL-based	Vue Router (official); URL-based
Forms	No built-in form framework; ad-hoc with WebAwesome/Lit	Reactive Forms / Template-driven forms	Uncontrolled/controlled components; Formik, React Hook Form	v-model + validation; VeeValidate, etc.
HTTP / Data	No built-in HTTP client; fetch or extensions (e.g. GitHub, ESM.sh)	HttpClient; interceptors	fetch / axios; TanStack Query common	fetch / axios; TanStack Query common
i18n	Built-in: i18n / i18nLazy, namespaces, SYSTEM_LANGUAGE_BUNDLES, currentLanguageSignal	@angular/localize; build-time or runtime	react-i18next, react-intl	vue-i18n (official)
Testing	Vitest (unit tests in core)	Jasmine/Karma or Jest; Angular Testing Library	Jest + React Testing Library; Vitest	Jest/Vitest + Vue Test Utils
Build / Bundling	Vite 7; core as library (ES, multiple entries); app as Vite SPA	Angular CLI (esbuild/webpack)	Vite, Create React App, Next.js, etc.	Vite (default), Vue CLI, Nuxt
Runtime footprint	Browser-native tech stack (Lit, standard DOM, Web APIs); very lightweight runtime; no heavy framework runtime layer	Full framework runtime; larger baseline	Small library; ecosystem can add weight	Small core; ecosystem can add weight
CLI	None (npm scripts: dev, build, build:app, test)	Angular CLI (generate, build, serve)	Create React App, Vite templates	Vue CLI, create-vue; Nuxt CLI
SSR	Client-only; no app-level SSR	Angular Universal	Next.js, Remix, etc.	Nuxt, Vite SSR
Styling / Theming	WebAwesome themes (theme classes, palettes); CSS in components	Encapsulated CSS; Angular Material theming	CSS Modules, styled-components, Tailwind	Scoped CSS; Vuetify/Quasar theming
Dependency injection	Built-in: rootContext, uiContext; services (appLoader, commandRegistry, workspace, settings, etc.)	Built-in hierarchical injector	Context API or external (Inversify, etc.)	provide/inject (composition API)
Plugin / Extension model	Core feature: extensions (per-app), contribution + command registries; loaders; enable/disable at runtime; marketplace: install external extensions from catalog URLs (e.g. appspace-marketplace)	NgModules; lazy-loaded feature modules	No standard; plugin patterns ad-hoc	Plugins (use()); Nuxt modules
Commands / shortcuts	Built-in: command registry, keybindings, command palette	No built-in; custom or libs	No built-in; custom or libs	No built-in; custom or libs
Layouts / App modes	Flexible: k-standard-layout (IDE) or custom render (e.g. dashboard shell with nav + tabs); same contributions	App shell + router-outlet	App shell + router; layout is component tree	App shell + router; layout is component tree
Primary use case	IDE-like apps and dashboard-like apps (tabs, workspace, editors, views, AI, extensions)	Enterprise SPAs, large teams	SPAs, dashboards, content apps	SPAs, progressive enhancement
License	EPL-2.0	MIT	MIT	MIT

Summary

• Where Appspace aligns: TypeScript, components, state (signals), i18n, testing (Vitest), Vite build, theming (via WebAwesome), DI, strong typing; browser-native stack (Lit, standard DOM, Web APIs) and lightweight runtime footprint.
• Where Appspace differs by design: No URL routing (IDE-style navigation); no built-in forms/HTTP; no CLI; client-only (no SSR); focus on IDE-like experiences and extensions rather than content-focused SPAs.
• Unique to Appspace: Focus on browser-native, lightweight runtime; contribution targets (sidebars, toolbars, editor area), command registry + keybindings, extension registry with enable/disable at runtime; extension marketplace — install external extensions from catalog URLs (e.g. appspace-marketplace); workspace/service layer; flexible layouts (IDE with k-standard-layout or custom dashboard shell with nav + views); first-class IDE UX (tabs, resizable layout, file browser, Monaco) and dashboard-style views.

---

Repository and license

• Repository: github.com/kispace-io/appspace
• License: EPL-2.0

Publishing of @kispace-io/core is done via GitHub Actions on version tags; see workflow and npm trusted publishing in the repo.