Backstage Template Designer Plugin

From YAML to Canvas — simplifying Backstage scaffolding

Empowering the Democratization of Templates in Backstage 🚀
Visually design, connect, and manage your Backstage scaffolder templates through an intuitive drag-and-drop interface — all inside your Backstage instance.
No YAML complexity. No coding required. Just creativity. We are breaking the glass! templating in Backstage made easy! 🚀

🖼️ Preview

Checkout the video!

▶ Watch the PREVIEW on YouTube

🚀 Template Designer PRO (Early Access)

Template Designer PRO is being built together with DX Labs for teams that need governance, validation, and enterprise support on top of the community edition. Compare Community vs PRO: https://www.dx-labs.com/template-designer#community

Early Access gives you:

preview builds and private updates
influence on the roadmap and feature priority
early access discount after the trial period

👉 Request PRO access: dx-labs.com/template-designer#contact
(fast & free to join the waitlist)

You'll be notified as soon as the first preview is ready.

🌟 Why “Democratization of Templates”?

Backstage templates shouldn’t be just for developers.
The Template Designer makes template creation accessible to everyone — from DevOps engineers to product teams — enabling true collaboration and transparency in how your software templates are built and evolve.

🚀 Features

⚡ Drag & Drop Editing — visually compose your Backstage scaffolder workflows.
🧩 Three Node Types
- Action Node – represents a single scaffolder action.
- Template Node – groups multiple actions into a reusable unit.
- Output Node – defines exported values or pipeline results.
💾 Work with Files — open existing template definitions or save your flow as a JSON file directly from the UI.
🔄 Live Flow Connections — connect nodes with arrows to define execution order.
💡 Frontend-Only Plugin — zero backend setup required.

⚙️ Installation

From your Backstage root directory

yarn --cwd packages/app add @tduniec/plugin-template-designer

In packages/app/src/App.tsx:

import { TemplateDesignerPage } from "@tduniec/plugin-template-designer";

const routes = (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/template-designer" element={<TemplateDesignerPage />} />
  </FlatRoutes>
);

In packages/app/src/components/Root/Root.tsx:

import { SidebarItem } from "@backstage/core-components";
import { TemplateDesignerIcon } from "@tduniec/plugin-template-designer";

<SidebarItem
  icon={TemplateDesignerIcon}
  to="template-designer"
  text="Template Designer"
/>;

⚙️ Usage

Visit your local Backstage instance:

http://localhost:3000/template-designer

Create and connect nodes, adjust properties, and export your flow as a JSON file.
You can also open an existing template file, modify it visually, and save your changes.

💾 File Management

Template Designer allows you to easily work with your Backstage scaffolder definitions:
Open a template file (.json) – load an existing flow directly into the canvas.
Edit visually – move nodes, adjust connections, rename actions.
Save – export your template back to a .json file ready for scaffolder integration.

Template Designer can read your registered actions!

🧠 Tech Stack

React + TypeScript
React Flow
Backstage Core Components

🛠️ Development

To run locally during development:

yarn start

This runs a local Backstage app with hot reload support for your plugin.

❤️ Contributing

Template Designer is still fresh out of the oven, so rough edges and open questions are expected—and that’s part of the fun.
If you spot a bug, have an idea, or simply want to riff on better tooling for templates, please open an issue or PR.

Help us push forward the Democratization of Templates in Backstage!
Ideas, feedback, and PRs are all welcome.

📄 License

🌐 Roadmap

TODO -> please help me gather your feedback first!
Take 2 minutes to fill up the survey!

tduniec/template-designer-plugin