ARForge Labs · Code Demo Narrator

Turn code into an interactive product story.

Explain software through synchronized code, previews, diffs and annotations.

Get component — $15

Setup guide · EN / ES →

Show what the code actually does

A chapter’s code and its preview change together, so nothing is left for the reader to infer.

  1. 01Step 01

    Start with the layout

    A lightweight SwiftUI view is the whole starting point — one container, no data yet.

  2. 02Step 02

    Add the profile card

    Drop in a reusable component instead of hand-building the card inline.

  3. 03Step 03

    Load remote data

    Switch to the view model and replace the placeholder with a real request.

  4. 04Step 04

    Add interaction

    A small piece of state turns the static card into something you can act on.

  5. 05Step 05

    Polish the experience

    A small refinement — a subtle divider and spacing pass — finishes the screen.

ContentView.swiftProfileCard.swiftTheme.swift
import SwiftUI
 
struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
Text("Profile")
.font(.title2.bold())
}
.padding()
}
}
Swift

Point at exactly what changed

Emphasize active code lines and ring the matching region of a built-in scene. Add your own callouts to screenshots and videos.

Not every product ends in a UI

Prepared request, response and output examples make API flows easy to follow. These examples illustrate the flow without sending live requests.

  1. 01Step 01

    Create the client

    One client instance carries the base URL for every request the app makes.

  2. 02Step 02

    Request the profile

    The same client fetches whatever endpoint the app needs next.

  3. 03Step 03

    Receive the response

    A typed response keeps the shape of the JSON explicit for the rest of the app.

  4. 04Step 04

    Render the result

    The typed profile flows straight into the UI — no extra mapping layer.

client.tsprofile.tsApp.tsx
const client = createClient({
baseURL: "https://api.acme.dev",
})
TypeScript

Explain the change, not just the result

Original code → highlighted changes, in one continuous scroll. Show additions and removals alongside the changed preview.

  1. 01Before

    Start from the simple version

    A basic profile row — a name, nothing more — is the version already shipped.

  2. 02The change

    Ship a better profile experience

    The diff shows exactly what the release adds — a header component and a follow state — next to what it removes.

ContentView.swiftProfileHeader.swift
struct ContentView: View {
var body: some View {
VStack {
Text(user.name)
}
.padding()
}
}
Swift

Built for developer products

SDKs. APIs. AI tools. Frameworks. Documentation. Courses. Developer portfolios. Anywhere a product needs to explain itself in code.

Built for real layouts

Container-aware behavior keeps the story readable wherever you place it. The instance below simply lives in a narrower column, so it switches to a stacked layout on its own.

  1. 01Step 01

    Start with the layout

    A lightweight SwiftUI view is the whole starting point — one container, no data yet.

  2. 02Step 02

    Add the profile card

    Drop in a reusable component instead of hand-building the card inline.

  3. 03Step 03

    Load remote data

    Switch to the view model and replace the placeholder with a real request.

  4. 04Step 04

    Add interaction

    A small piece of state turns the static card into something you can act on.

  5. 05Step 05

    Polish the experience

    A small refinement — a subtle divider and spacing pass — finishes the screen.

ContentView.swiftProfileCard.swiftTheme.swift
import SwiftUI
 
struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
Text("Profile")
.font(.title2.bold())
}
.padding()
}
}
Swift

One component. Different ways to explain software.

Code → UI. Code → API. Diff → Before/After. Scroll back up — code, preview, highlights and progress all rewind together.

Create a free website with Framer, the website builder loved by startups, designers and agencies.