> ## 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.

# Expansion SDK

> Build expansions for Lode Studio: pages, editors, item types, settings tabs, themes and more.

Build expansions for Lode Studio: pages, editors, item types, settings tabs, themes and more.

An expansion is a small project. A `meta.json` says who it is, a `config.json` says how to run it, and your source files import each other normally. TypeScript or JavaScript, your choice; the app compiles it on load, with no build step of your own.

```text theme={null}
MyExpansion/
├── meta.json
├── config.json
├── src/
│   ├── index.ts          the start file
│   └── pages/Home.tsx
├── lib/                  optional: your own libraries
└── assets/
```

<CodeGroup>
  ```ts src/index.ts theme={null}
  import sdk from 'sdk'
  import Home from './pages/Home'

  sdk.pages.register('home', Home)
  sdk.sidebar.add({ id: 'home', page: 'home', label: 'My Expansion', icon: 'Star' })
  ```

  ```tsx src/pages/Home.tsx theme={null}
  import { useProjectState, PageTitle, PrimaryButton } from 'sdk/ui'

  export default function Home() {
    const [count, setCount] = useProjectState('count', 0)
    return (
      <>
        <PageTitle>My Expansion</PageTitle>
        <PrimaryButton onClick={() => setCount(count + 1)}>Clicked {count} times</PrimaryButton>
      </>
    )
  }
  ```
</CodeGroup>

Your expansion runs in a controlled environment: no `fs`, no `require`, no `window`. Everything it does to the app goes through `sdk`, and anything that touches the user's files or the network is gated by a permission they approve.

## The guides

<CardGroup cols={2}>
  <Card title="Getting started" icon="rocket" href="/getting-started">
    Install a template, get it loading, see it hot-reload
  </Card>

  <Card title="Manifest" icon="file-code" href="/manifest">
    `meta.json` and `config.json`, field by field
  </Card>

  <Card title="Modules and imports" icon="folder-tree" href="/modules">
    What you can import: files, CSS, assets, JSON, the SDK
  </Card>

  <Card title="Libraries" icon="books" href="/libraries">
    `lib/` folders, imported by name instead of a path
  </Card>

  <Card title="Writing style" icon="pen-nib" href="/writing-style">
    Top-level, class, object or function; React class components
  </Card>

  <Card title="sdk reference" icon="plug" href="/sdk-reference">
    Every SDK point
  </Card>

  <Card title="sdk/ui reference" icon="table-cells" href="/ui-reference">
    Hooks and the component kit
  </Card>

  <Card title="Permissions" icon="shield-check" href="/permissions">
    What each one allows, and how approval works
  </Card>

  <Card title="Lifecycle" icon="arrows-rotate" href="/lifecycle">
    Load, hot reload, errors, logs, disable, uninstall
  </Card>

  <Card title="Publishing" icon="box-open" href="/publishing">
    Keys, trusted and untrusted, packing a `.nxe`
  </Card>

  <Card title="Migrating from main.js" icon="right-left" href="/migration">
    The old API, point by point, and what is missing
  </Card>

  <Card title="Troubleshooting" icon="circle-question" href="/troubleshooting">
    Error messages and what they mean
  </Card>

  <Card title="Examples" icon="code" href="/examples">
    What each shipped example demonstrates
  </Card>

  <Card title="Internals" icon="gear" href="/internals">
    How the app runs all this. For maintainers.
  </Card>
</CardGroup>

## Versions

This app provides **SDK 2.0.0**. Your `meta.json` declares the range it was built for:

```json theme={null}
{ "sdkVersion": "^2.0.0" }
```

<Note>
  An expansion the app cannot satisfy is disabled with a message saying so, rather than half-working.
</Note>