The Default Starter

Every app the platform creates starts from one place: the default starter, checked out locally at ~/Sites/default. It is a real, runnable Laravel application — not a scaffold script — that already knows how to authenticate users, browse its own database, and render inside the builder canvas. Once you understand the starter, you know what every app is on day one.

#The stack

The starter is a deliberately lean, modern Laravel app. Its composer.json requires almost nothing beyond the framework and two DevDojo packages — everything else arrives transitively through the Foundation.

"require": {
    "php": "^8.3",
    "laravel/framework": "^13.7",
    "laravel/tinker": "^3.0",
    "livewire/livewire": "^4.1",
    "devdojo/foundation": "*",
    "devdojo/database": "*"
}

Those two devdojo/* requires do the heavy lifting. foundation pulls in auth, accounts, billing, teams, notifications, the components library, and Folio-based page routing; database provides the live database browser. Like the control plane, the starter declares a path repository so packages/devdojo/* are symlinked for local development.

#The pages it ships

Folio registers each Blade file under resources/views/pages as a route automatically. The starter ships three, and they double as a tour of what's in the box.

#Welcome — pages/index.blade.php

The public landing page, named home. It renders a self-contained "Welcome to your New App" card with a dependency-free canvas confetti burst (click the logo to fire it again), and two calls to action: Start Building, which links to the builder via config('platform.builder_url'), and View Docs.

use function Laravel\Folio\name;

name('home');

#Dashboard — pages/dashboard.blade.php

The authenticated home, behind Folio's auth middleware. It renders the app's dashboard layout with an empty-state placeholder — the canvas you (and the AI) build onto.

use function Laravel\Folio\middleware;
use function Laravel\Folio\name;

middleware('auth');
name('dashboard');

#Database — pages/database.blade.php

An in-app database browser at /database, also auth-protected. It composes two Livewire components from the database package — a table list beside a records grid — so you can browse, search, and edit records without leaving the app.

<aside>
    @livewire('devdojo.tables')
</aside>
<section>
    @livewire('devdojo.database')
</section>

#Layouts and components

The starter ships two Blade layouts and a shared head partial. A marketing layout (<x-layouts.marketing>) drives the public site with a shrink-on-scroll nav, and a dashboard layout (<x-layouts.dashboard>) provides the signed-in chrome — a sticky top banner, the account nav, and a pinned content frame the page scrolls inside of.

Both pull in partials/head, which handles two things every app needs. First, it applies the saved light/dark theme before first paint to avoid a flash of the wrong mode and exposes a global window.toggleTheme(). Second, it flags embedded rendering — when the app is loaded inside the builder's iframe canvas it adds an is-embedded class before paint, so pages can drop standalone-only chrome cleanly.

{{-- partials/head.blade.php --}}
<script>
    if (window.self !== window.top) {
        document.documentElement.classList.add('is-embedded');
    }
</script>

Beyond the layouts, the starter carries the full components library — <x-button>, <x-dropdown>, <x-badge>, tabs, modals, a command palette, a Monaco editor, and more — ready to compose.

#Design tokens and Tailwind v4

Styling is driven entirely from CSS custom properties in resources/css/app.css. Every DevDojo component reads these tokens, so retheming the whole app is a matter of editing the values — light and dark are swapped via a .dark class.

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

/* Scan the Foundation packages so their component classes are compiled. */
@source '../../packages/devdojo/components/resources';
@source '../../packages/devdojo/foundation/resources';
@source '../../packages/devdojo/database/src';

:root {
    --primary: #1c1917;
    --primary-foreground: #ffffff;
    --radius-medium: 0.75rem;
    /* …background, card, muted, destructive, border, ring… */
}

The @source directives matter: they tell Tailwind v4 to scan the symlinked packages so the component classes compile into the app's stylesheet.

#Platform integration

The starter is aware it lives inside DevDojo. config/platform.php wires it to the surrounding planes:

• builder_url — where the "Start Building" button and the platform-builder-url meta tag point (build.test locally, build.<app-domain> in production).
• frame_ancestors — the origins allowed to embed the app in the builder canvas, emitted as a Content-Security-Policy: frame-ancestors directive so nothing else can iframe it.
• token — a shared secret for server-to-server bridge calls between the builder and the app.

PLATFORM_BUILDER_URL=http://build.test
# PLATFORM_FRAME_ANCESTORS="'self' http://build.test https://*.devdojo.app"
# PLATFORM_BRIDGE_TOKEN=

#The seed every app grows from

When the platform provisions a new app, this template is what it generates into your GitHub repo and clones into a workspace. In local development the same checkout doubles as the donor — the workspace builder copies its vendor/ and public/build straight from ~/Sites/default to make provisioning fast.

So everything above — the three pages, the two layouts, the theme tokens, the component library, the database browser, the platform wiring — is the exact starting point of every DevDojo app. From here, the AI builder takes over, and the app becomes whatever you describe.

#Where to go next

• Apps Overview — what an app is and its lifecycle.
• Workspaces & Snapshots — how this template becomes a running workspace.
• The foundation, components, and database packages — the pieces the starter is assembled from.