Skip to main content

Drive apps

Connect's default drive view is a folder tree with documents inside it. That's fine for generic storage — but once you have a real product, you probably want a Kanban board, a project dashboard, or a curated landing page instead. That's exactly what a drive app gives you.

Editor vs. drive app — the sharp line​

You've already seen : a React component that renders and edits one document. A drive app is the complementary piece — it renders the whole drive.

Think of it this way:

  • Editor — the inside of a document. One task, one contract, one budget row.
  • Drive app — the outside. A list of all tasks. A summary dashboard. A workflow screen that composes multiple documents into a single view.

Connect calls one or the other depending on what's selected. When a user has a drive open but no document selected, the drive app runs. When they open a specific document, the appropriate editor takes over — and the drive app can still wrap it as a shell.

What a drive app looks like​

Codegen scaffolds a drive app with a DriveExplorer component. It receives children — the active document's editor — and decides where to render it:

export function DriveExplorer({ children }: EditorProps) {
  const showDocumentEditor = !!children;

  return (
    <div className="flex h-full">
      <FolderTree />
      <div className="flex-1 overflow-y-auto p-4">
        {showDocumentEditor ? children : <DriveContents />}
      </div>
    </div>
  );
}

When a document is open, children is truthy and the editor appears. Otherwise, your custom DriveContents fills the space — a Kanban board, a document grid, whatever fits your product.

QuizPick the right tool for each scenario.

Drive apps ship real products​

The combination of drive app + editors is how teams turn Powerhouse into a finished product. The drive app owns the navigation, the cross-document dashboard, and any workflow that spans multiple documents. Editors own the detail view for each one. Together they cover the full surface area of a real frontend — without leaving Connect.

Hooks like useDocumentsInSelectedDrive() let the drive app read every document in the drive, and showCreateDocumentModal() wires up the "new document" flow — all from @powerhousedao/reactor-browser.