> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lodemc.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> What each shipped example demonstrates

Working expansions in the app repository under `examples/expansions/`. Copy one into your Expansions folder, put your own `id` and `apiKey` in its `meta.json`, and it runs.

## quick\_notes (TypeScript)

A notes page per project, opened from the sidebar.

Shows: `pages.register` and `sidebar.add` with an imported SVG icon, multi-file code (`src/lib/notes.ts`), a CSS module, a JSON import, and `useProjectState` for state that survives restarts.

## item\_inspector (JavaScript)

A summary of the open item, under its model viewer in the item editor.

Shows: `injections.add` into `item-editor:model-viewer:after`, reading `injectionContext`, an `events.on('item:open')` listener, and plain JS with JSX.

## activity\_log (TypeScript)

Records item and folder changes to `activity.log` in the project folder.

Shows: several `events.on` listeners, a project settings tab, `setInterval` cleaned up for you, `project:read` / `project:write` in practice, and `onUnload` flushing before the expansion goes away.

## class\_style (JavaScript)

The same ideas written with classes.

Shows: a start file exporting `class extends Expansion` with `onLoad` / `onUnload`, state on the instance, and a React class component page.

## sdk\_playground (TypeScript)

A page of buttons, each exercising one SDK point and showing its result.

Shows: nearly every point at once, a `lib/` library imported by name and by subpath, a permission being refused on purpose (`fetch` without `network`), a component that throws so you can see the error card, and toggles for an injection and a global stylesheet.

Useful as a reference and as a way to check the SDK works after changing the app.

## Reading order

<CardGroup cols={3}>
  <Card title="New to it" icon="seedling">
    **quick\_notes**, then **sdk\_playground** to see the rest.
  </Card>

  <Card title="Coming from main.js" icon="right-left" href="/migration">
    **item\_inspector** is closest to what you had.
  </Card>

  <Card title="Prefer classes" icon="cube" href="/writing-style">
    **class\_style**.
  </Card>
</CardGroup>