In-app help and documentation

Aha! Builder applications can display their own in-app user guide. The guide pages you write in Aha! become content your application can fetch and render — organized hierarchically, addressable by URL, and styled to match your app. Elle wires this in when you ask your application to surface its documentation to end users.

This reference documents the userGuide API: fetching the page hierarchy, loading page content, and rendering it on the client. Read it to see how your applications can present documentation, to review what Elle generated, or to ground an AI assistant in the specifics — reference this article with Elle or any LLM so it knows exactly how the user guide API works in Aha! Builder.

Click any of the following links to skip ahead:

• Overview

• Server Functions

• Table of Contents

• Load Page Content

• Client Usage

• Styling

• Build it with Elle

Overview

Access user guide pages created in Aha! for your application. The user guide is a collection of documentation pages organized hierarchically.

Server Functions

Create server functions to expose user guide data to the client. Use the userGuide module exported from the framework:

Table of Contents

Fetch pages (metadata only, no content). Pass an optional parentId to fetch only children of a specific page:

import { server, userGuide } from '@aha-app/builder-core';

server.data('getUserGuidePages', async () => {
  return userGuide.getPages();
});

server.data(
  'getChildPages',
  { validate: z.object({ parentId: z.string().optional() }) },
  async args => {
    return userGuide.getPages(args?.parentId);
  }
);

Returns UserGuidePage[] where each page contains:

• id - Page ID

• name - Page title

• parent_id - Parent page ID for hierarchy (null for top-level pages)

• position - Sort order (integer, ascending)

• children_count - Number of child pages

• created_at - ISO 8601 timestamp

• updated_at - ISO 8601 timestamp

Load Page Content

Fetch a single page with its HTML content:

server.data(
  'getUserGuidePage',
  { validate: z.object({ id: z.string() }) },
  async ({ id }) => {
    return userGuide.getPage(id);
  }
);

Returns the same fields as above plus:

• content_html - Page content as semantic HTML. Does not include the page name

Client Usage

Each guide page should have its own URL so users can bookmark, share links, and use browser back/forward. Use the built in file-system routing to track the selected page.

Example file structure:

data/
  guide.server.ts    # server functions for guide pages
pages/guide/
  index.tsx          # /guide — user guide index
  [id].tsx           # /guide/:id — selected page content

Styling

Page content is unstyled semantic HTML. Use the prose class to apply a default set of styles. Override these in application.css if needed:

function PageContent({ name, content_html }: { name: string; content_html: string }) {
  return (
    <article className='prose'>
      <h1>{name}</h1>
      <div dangerouslySetInnerHTML={{ __html: content_html }} />
    </article>
  );
}