Skip to main content

UI Development

UI development in MoLOS uses Svelte routes inside the module repo.

1. State Management (Stores)​

Location: lib/stores/

Use Svelte stores to manage global module state and data fetching.

import { writable } from 'svelte/store';

export const items = writable([]);
export const uiState = writable({ loading: false, error: null });

export async function loadData() {
	uiState.update(s => ({ ...s, loading: true, error: null }));
	try {
		const response = await fetch('/api/MoLOS-Example');
		const data = await response.json();
		items.set(data);
	} catch (err) {
		uiState.update(s => ({ ...s, error: err.message }));
	} finally {
		uiState.update(s => ({ ...s, loading: false }));
	}
}

2. Components​

Location: lib/components/

Build reusable UI pieces using Svelte and Tailwind CSS.

<script lang="ts">
	let { item } = $props();
</script>

<div class="p-4 border rounded-lg">
	<h3 class="font-bold">{item.title}</h3>
	<p>{item.description}</p>
</div>

3. Routes & Layouts​

Location: routes/ui/

  • +layout.svelte: Defines the module shell if needed.
  • dashboard/+page.svelte: The primary view for the module.
  • +page.svelte: Root route, typically redirects to /ui/<ModuleId>/dashboard.