Decker: The Modern Platform That Builds on the Legacy of HyperCard and Classic macOS

Decker: The Modern Platform That Builds on the Legacy of HyperCard and Classic macOS

Do you remember the tactile joy of clicking through a stack of virtual index cards, scripting simple commands, and watching an app come alive in seconds? If you spent any time with a Macintosh in the early 90s, you know exactly what I'm talking about. That magic was HyperCard.

Today, we're looking at Decker, a modern reimagining of that experience. Decker is a platform that builds on the legacy of HyperCard and classic macOS authoring tools, bringing the stack-based paradigm into the 21st century without losing the soul of the original vision.

Whether you're a retro-computing enthusiast, a developer tired of bloated no-code tools, or just curious about the evolution of user interfaces, Decker offers a refreshing approach to building software. In this guide, we'll explore what Decker is, why the HyperCard philosophy still matters, and how you can start building your own stacks today.

What is Decker?

Decker is a development environment and runtime that revives the stack metaphor for modern creators. In the HyperCard world, a "stack" is a collection of "cards" that share a common set of scripts and objects. You could build games, databases, presentations, and utilities by arranging fields, buttons, and background images on cards and wiring them together with HyperTalk scripts.

Decker takes this core concept and strips away the hardware limitations of the 1980s and 90s. It's a platform that builds on the legacy of intuitive, object-oriented authoring while adding features that today's developers need:

• Modern Scripting: Support for contemporary languages or a refined scripting syntax that bridges the gap between HyperTalk simplicity and JavaScript power.
• Cross-Platform Runtime: Your stacks aren't trapped in a vintage Mac emulator. Decker lets you run and export to web, desktop, and mobile targets.
• Version Control Friendly: Unlike proprietary formats that lock you in, Decker treats stacks as code, making them suitable for Git workflows.
• Extensible Object Model: You can create custom controls and behaviors, just like HyperCard's behaviors, but with a more flexible architecture.

The result is a tool that feels familiar to anyone who's ever written a put "Hello" into field "greeting" command, but runs on the infrastructure of today.

The HyperCard Legacy: Why It Still Matters

To appreciate Decker, it helps to understand why HyperCard was revolutionary. Before HyperCard, building a simple interactive application required thousands of lines of C or Pascal. HyperCard let you prototype complex ideas in minutes. It democratized software creation in a way that only a few tools have matched since.

The philosophy behind HyperCard was authoring over programming. It focused on the relationships between objects rather than the underlying logic. This cognitive model is still relevant. In a world where we're drowning in abstract build systems, container orchestration, and microservices, Decker reminds us that software can be visual, tangible, and direct.

However, HyperCard had limitations. It was proprietary, tied to Apple's ecosystem, and eventually discontinued. The community kept the spirit alive through projects like SuperCard and OpenRubik, but a unified, modern solution was missing.

Decker fills that gap. It's a platform that builds on the legacy of HyperCard by preserving its authoring-first mindset while embracing open standards and modern deployment pipelines. It's not a nostalgia trip; it's a practical evolution.

Getting Started with Decker

Ready to dive in? Let's walk through the process of setting up Decker and creating your first stack.

Installation

Decker is distributed as an open-source project. You can grab the latest release and explore the source code on GitHub. Having the repo available is great for community plugins, documentation, and contributing back to the project.

For a local development environment, the recommended setup involves Node.js and the Decker CLI. Here's how you can get started:

# Install the Decker CLI globally
npm install -g decker-cli
# Create a new project directory
mkdir my-first-stack
cd my-first-stack
# Initialize a new Decker stack
decker init

The decker init command scaffolds a directory structure that includes a stack.json manifest, a cards/ folder for your card definitions, and a scripts/ folder for your logic. This structure mirrors HyperCard's file organization but adapts it for modern file systems.

Your First Stack

A stack in Decker is defined by a JSON manifest. Let's create a simple "Welcome" stack with a single card that displays a greeting and a button.

Create a file named stack.json in your project root:

{
  "name": "WelcomeStack",
  "version": "1.0.0",
  "cards": [
    {
      "id": "card_01",
      "name": "Welcome",
      "background": "#f0f0f0",
      "objects": [
        {
          "type": "field",
          "id": "greeting",
          "value": "Welcome to the future of stacks!",
          "style": {
            "font": "24px sans-serif",
            "textAlign": "center",
            "margin": "50px"
          }
        },
        {
          "type": "button",
          "id": "exploreBtn",
          "label": "Explore More",
          "style": {
            "position": "absolute",
            "bottom": "20px",
            "left": "50%",
            "transform": "translateX(-50%)"
          },
          "script": "on mouseUp\n  go to card \"About\"\nend mouseUp"
        }
      ]
    },
    {
      "id": "card_02",
      "name": "About",
      "background": "#e0e0e0",
      "objects": [
        {
          "type": "field",
          "id": "info",
          "value": "You've navigated to the About card. Decker makes navigation easy.",
          "style": {
            "font": "18px sans-serif",
            "margin": "40px"
          }
        },
        {
          "type": "button",
          "id": "backBtn",
          "label": "Go Back",
          "script": "on mouseUp\n  go to card \"Welcome\"\nend mouseUp"
        }
      ]
    }
  ]
}

This JSON structure defines two cards. Each card contains objects (fields and buttons) with styles and scripts. Notice the script property on the buttons? That's where the magic happens.

Running Your Stack

Once your stack.json is ready, you can preview your creation locally:

decker serve

This starts a local development server with hot-reloading. Open your browser to http://localhost:3000, and you'll see your interactive stack. Click "Explore More," and you'll jump to the About card. The navigation is handled by the go to card command, which Decker supports as part of its HyperTalk-compatible scripting layer.

Scripting in Decker

One of Decker's standout features is its scripting environment. It offers a hybrid approach that respects HyperTalk's simplicity while allowing access to modern APIs when you need them.

HyperTalk-Compatible Syntax

For those who miss HyperTalk, Decker includes a compatible subset. You can use familiar commands like put, get, go to, and answer.

javascript
// Script for a button that generates a random color
on mouseUp
  put random(255) into r
  put random(255) into g
  put random(255) into b
  put "rgb(" &
---
*Enjoyed this? I build simple, powerful AI tools — try the free [Text Summarizer](https://text-summarizer.solomontools.workers.dev) or browse the full toolkit at [Solomon Tools](https://solomon-tools.solomontools.workers.dev). No signup, no subscription.*