# How to Integrate Retool with Marvel

- Tool: Retool
- Difficulty: Beginner
- Time required: 15 minutes
- Last updated: April 2026

## TL;DR

Use Marvel with Retool by leveraging Marvel's rapid wireframing and prototyping tools to design Retool app layouts before building. Create screen mockups in Marvel to plan component placement and user flows, then access Marvel project metadata via the Marvel API as a REST API Resource. Marvel is ideal for quick UX validation of internal tool layouts with non-technical stakeholders before investing build time in Retool.

## Use Marvel for Rapid Wireframing of Retool App Layouts

Building a Retool app without a wireframe often leads to multiple layout iterations as stakeholders request changes after seeing the initial build. Marvel addresses this by enabling teams to create fast, clickable wireframes that can be reviewed and approved before any Retool building begins. A 30-minute Marvel wireframing session can save several hours of Retool layout adjustments.

Marvel's particular strength is speed: it offers pre-built wireframe kits, drag-and-drop screen design, and instant sharing via URL — no account required for viewers. For Retool apps, Marvel's grid-based layout approach maps naturally to Retool's 12-column container system. You can sketch out where Tables, Forms, Charts, and Stat components will go, define the primary user flows (e.g., 'user searches → selects row → fills form → submits'), and validate the logic with stakeholders in a clickable prototype before writing a single query.

Marvel also provides an API that exposes project metadata — project names, screens, hotspots, and comments. This enables a secondary integration pattern: connecting Marvel's API as a Retool REST API Resource to build a design documentation panel that shows all Marvel wireframes alongside their corresponding built Retool apps. Teams can track the design-to-build handoff process and verify that implemented layouts match approved wireframes.

## Before you start

- A Marvel account with at least one wireframe project (Free plan includes 1 project; Pro plan includes unlimited projects and API access)
- Marvel API token (available in Marvel account settings → API — requires Pro plan or higher for API access)
- Existing Retool applications or planned Retool apps that need wireframe-first design validation
- A Retool account with permission to create Resources and build apps
- Basic familiarity with Retool's component library (Tables, Forms, Charts, Stat components) for accurate wireframe planning

## Step-by-step guide

### 1. Plan your Retool layout in Marvel using wireframe components

Before creating a Marvel wireframe for a Retool app, understand the mapping between Marvel's component categories and Retool's component library. This ensures your wireframes accurately represent what will be built:

Retool Tables → Marvel: Use Rectangle shapes with horizontal lines to represent table rows. Label the columns with text. Add a Row Group to represent pagination controls at the bottom.

Retool Forms → Marvel: Use Marvel's Form UI kit components (Input fields, Dropdowns, Checkboxes) from the Web Wireframe kit. Group them inside a panel container.

Retool Charts → Marvel: Use a Rectangle placeholder labeled 'Line Chart' or 'Bar Chart' with the data fields it will show. Chart wireframes don't need to be detailed — a labeled box communicates intent clearly.

Retool Stat components → Marvel: Use a 2x2 grid of small rectangles, each labeled with the metric name (e.g., 'Total Revenue', 'Active Users').

Retool Tabs → Marvel: Draw a row of tab labels at the top of a container, with the selected tab underlined.

In Marvel, open a new project and select 'Web' as the screen type. Use the Retool canvas dimensions (typically 1440px wide) for accurate scale. Add screens for each tab or view in your planned Retool app. Connect screens with hotspots to create a clickable prototype that demonstrates user navigation flows.

Once complete, click Share → Prototype to generate a shareable URL. Send this to stakeholders with a note on what decisions you need: 'Please review the layout and confirm: (1) Is the search placement correct? (2) Should the form be in a modal or inline?'

**Expected result:** You have a Marvel prototype with screens representing each major view of your planned Retool app, shared with stakeholders via a Marvel prototype URL for review and approval.

### 2. Use Marvel's handoff specs to configure Retool components

Once a wireframe is approved, Marvel's Design Specs feature (available on Pro plan) provides pixel-accurate measurements, colors, and layout details that guide Retool component configuration. While Retool uses a grid system rather than pixel positioning, Marvel's specs help with:

Column widths: Marvel shows element widths in pixels. Convert to Retool's 12-column grid proportions. For example, if Marvel shows a Table as 960px of a 1440px canvas, that's 2/3 of the width — use 8 columns out of 12 in Retool's container settings.

Spacing and margins: Marvel's specs show padding values. Match these in Retool's container padding settings for consistent visual spacing.

Color palette: Marvel shows hex color values for any element. Use these in Retool's component styling (background colors, text colors, border colors) to match the approved design.

Component labels and copy: Marvel mockups contain placeholder text — use these exact labels in Retool component names, column headers, and button labels for consistency with the approved design.

When building in Retool, keep the Marvel prototype open in a browser tab alongside the Retool editor. As you drag components onto the canvas, reference the wireframe for placement decisions. For each container in Retool, consult Marvel to determine which components go inside it and in what order.

Marvel's comment feature lets stakeholders annotate specific screens — before building, export or screenshot all comments and resolve any open questions. This prevents 'but the mockup showed...' conversations after the Retool app is built.

**Expected result:** Retool components are configured and positioned based on Marvel wireframe specifications, with column widths, spacing, and labels matching the approved design.

### 3. Generate a Marvel API token and create the REST Resource

For programmatic access to Marvel project metadata, generate an API token. Log into your Marvel account at marvelapp.com. Go to Settings → Developer (or Account → API in some plan tiers). Click Create Token. Copy the token value immediately.

Note: Marvel API access requires a Pro plan or higher. Free plan accounts can export prototype links and use Marvel's sharing features but cannot call the API programmatically.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API.

Name: Marvel API

Base URL: https://api.marvelapp.com/v2

Headers:
- Key: Authorization | Value: Token {{ retoolContext.configVars.MARVEL_API_TOKEN }}
- Key: Content-Type | Value: application/json

First, store your Marvel token in Retool Settings → Configuration Variables as MARVEL_API_TOKEN (you can mark it as secret for additional security, though Marvel tokens are read-only).

Click Create Resource. Test with a GET to /user/ — this should return your Marvel user profile information including your user ID, which you'll need for querying your projects. If it returns your profile, the authentication is working.

**Expected result:** The Marvel API resource is created and a test GET /user/ returns your Marvel user profile, confirming the token authentication is working correctly.

### 4. Fetch Marvel projects and screens

Create a query named getProjects. Set the method to GET and path to /companies/{{ marvelCompanyId }}/projects/. Marvel's API is company-scoped — you need your company ID to access shared projects.

To find your company ID: first run a query to GET /user/ and note the company field in the response, or GET /companies/ to list all companies your account belongs to.

Query parameters for getProjects:
- page: {{ pagination.page || 1 }}
- pageSize: 20

The response includes a results array of project objects with id, name, created_at, modified_at, and prototype_url.

For each project, you can fetch its screens: GET /projects/{{ table_projects.selectedRow?.data?.id }}/screens/. Each screen has id, name, width, height, and hotspot definitions.

Create a transformer that maps project data to display-friendly rows. Construct the prototype URL for embedding — Marvel prototype URLs follow the format: https://marvelapp.com/prototype/PROTOTYPE_ID.

Bind the transformed data to a Table. Configure the prototype_url column as a link type so users can open the prototype directly from the Retool table.

```
// Transformer for Marvel projects
const projects = data.results || [];
return projects.map(p => ({
  id: p.id,
  name: p.name || '(Untitled)',
  screens: p.screenCount || 0,
  created: p.created_at ? new Date(p.created_at * 1000).toLocaleDateString() : '',
  modified: p.modified_at ? new Date(p.modified_at * 1000).toLocaleDateString() : '',
  prototype_url: p.prototype_url || `https://marvelapp.com/prototype/${p.prototypeUrl || ''}`,
  preview_image: p.image?.url || ''
}));
```

**Expected result:** The projects Table shows all Marvel wireframe projects with screen counts, last modified dates, and clickable prototype URLs for direct preview access.

### 5. Build a design review and handoff panel

Combine Marvel project data with a review workflow to create a complete design handoff tracker in Retool. The panel needs three components:

1. Project list (left): A Table showing all Marvel projects from the API with status indicators (Wireframing, In Review, Approved, Building, Complete). Store statuses in a Retool Database table keyed on Marvel project ID.

2. Prototype preview (center): An IFrame component showing the selected Marvel prototype. Set the Src to the prototype URL of the selected project row. Marvel prototype embeds use the URL: https://marvelapp.com/prototype/PROTOTYPE_ID?emb=1 (the ?emb=1 parameter enables embed mode).

3. Review panel (right): A Form with reviewer name, status dropdown, comments text area, and a Submit button. On submit, write the review to a Retool Database table and update the project status. Add an On Success handler that triggers a query to re-fetch statuses.

Add a progress bar at the top showing overall pipeline health: X of Y wireframes approved, X of Y apps built.

For complex multi-team design review workflows involving multiple tools (Marvel, Jira, Confluence), RapidDev's team can help build a unified project tracking dashboard that aggregates data from all systems.

```
// Query to save design review to Retool Database
// Run as a JavaScript query after form submission
const review = {
  marvel_project_id: table_projects.selectedRow.data.id,
  project_name: table_projects.selectedRow.data.name,
  reviewer_name: textInput_reviewer.value,
  status: select_status.value,
  comments: textArea_comments.value,
  reviewed_at: new Date().toISOString()
};

// Insert into Retool Database (adjust query name as needed)
await saveReview.trigger({ additionalScope: { reviewData: review } });
await refreshProjectStatus.trigger();
return review;
```

**Expected result:** The design review panel shows all Marvel wireframes with prototype previews, a review form for approval status, and a pipeline tracker showing the overall progress from wireframe to built Retool app.

## Best practices

- Run a wireframing session in Marvel before opening Retool's editor for any dashboard with more than 3 components or 2 interaction types — the 30-minute investment in wireframing typically saves multiple hours of layout rework.
- Map Retool's 12-column grid to Marvel's artboard width before wireframing: a 1440px artboard with 12 columns means each column is 120px. Use this mapping to ensure wireframe proportions translate accurately to Retool's component sizing.
- Keep Marvel wireframes deliberately low-fidelity (grayscale, no icons) — high-fidelity wireframes create stakeholder fixation on aesthetic details rather than layout and functionality decisions, which slows the approval process.
- Store approved Marvel prototype URLs in a Retool Database table indexed by Retool app name — this creates a permanent link between wireframes and implemented apps for audit purposes and onboarding reference.
- Add a 'View Wireframe' button to finished Retool apps that links to the Marvel prototype — developers and stakeholders can compare the built app to the approved wireframe to verify nothing was missed.
- Use Marvel's comment feature for asynchronous feedback on wireframes before synchronous review meetings — this ensures stakeholders arrive at review meetings with specific, documented feedback rather than vague impressions.
- Create a Marvel wireframe template for your organization's standard Retool app patterns (e.g., 'Search and List Dashboard', 'CRUD Admin Panel') — reusing established layouts reduces wireframing time for future projects.

## Use cases

### Wireframe and validate Retool app layouts before building

Use Marvel to create rapid wireframes of planned Retool dashboards, share clickable prototypes with stakeholders for feedback, and establish layout decisions before opening Retool's editor. This is especially valuable for complex multi-tab dashboards where the information architecture decisions benefit from stakeholder input before implementation.

Prompt example:

```
Create a Marvel wireframe for a Retool customer support dashboard with three sections: a search bar and customer list Table at the top, a customer detail panel in the middle showing account info and recent orders, and a support action panel at the bottom with form fields and buttons. Share the prototype link with stakeholders for approval before building in Retool.
```

### Build a design-to-build handoff tracker in Retool

Create a Retool admin panel that queries the Marvel API to list all wireframe projects alongside their corresponding built Retool applications. Project managers can track which wireframes have been approved, which are in review, and which corresponding Retool apps are in development — providing visibility into the design-to-implementation pipeline.

Prompt example:

```
Build a Retool project tracker that pulls Marvel project metadata via the Marvel API. Show a Table with: project name, created date, last updated, number of screens, and prototype share URL. Add a column for 'Retool App URL' (from a manual input or database). Include a status column (Wireframing, In Review, Approved, Building, Complete) managed via a dropdown in the Table.
```

### Embed Marvel prototypes in Retool for stakeholder review

Create a Retool internal portal that embeds Marvel clickable prototypes as iframes alongside approval workflows. Product managers can review wireframes, leave comments via a Retool form that posts to a Notion or Jira resource, and formally approve designs — all from a Retool app rather than switching between Marvel's share links and separate tools.

Prompt example:

```
Build a Retool design review portal. Show a list of Marvel projects in a sidebar Table. When a project is selected, embed its Marvel prototype in a large IFrame on the right. Below the IFrame, show a feedback form with fields for reviewer name, status (Approved/Needs Changes), and comments. Include a submit button that saves the review to a Retool Database table.
```

## Troubleshooting

### Marvel prototype does not load in the Retool IFrame — shows a blank or error page

Cause: Marvel's prototype sharing settings may restrict iframe embedding, or the prototype link requires viewer authentication. Some Marvel sharing configurations block iframe display via Content Security Policy headers.

Solution: In Marvel, ensure the prototype is set to 'Anyone with the link can view' under the Share settings. Add the ?emb=1 parameter to the prototype URL to enable embed mode. If the IFrame still shows blank, test the URL directly in a browser incognito window — if it works there but not in Retool's IFrame, the issue is a CSP restriction. In this case, use the URL as a link that opens in a new tab rather than an embedded IFrame.

```
// IFrame src with embed parameter:
{{ table_projects.selectedRow?.data?.prototype_url + '?emb=1' }}
```

### Marvel API returns 401 Unauthorized despite correct token

Cause: The Authorization header value must start with 'Token ' (capital T, with a space) — not 'Bearer '. Using 'Bearer YOUR_TOKEN' or providing the token without the prefix causes authentication to fail.

Solution: Update the Authorization header in your Retool resource to: Token {{ retoolContext.configVars.MARVEL_API_TOKEN }}. Confirm the header name is exactly 'Authorization' (capital A) and the value starts with 'Token ' followed directly by your token with no extra spaces.

### GET /companies/{id}/projects returns 403 Forbidden or empty results

Cause: The company ID being used may not match the company your API token belongs to. Marvel accounts can belong to multiple companies, and using the wrong company ID returns 403.

Solution: First call GET /user/ to get your user profile, which includes your primary company affiliation. Then call GET /companies/ to list all companies your account belongs to. Use the correct company ID from this list when querying for projects. Store it in a Retool Configuration Variable as MARVEL_COMPANY_ID.

## Frequently asked questions

### Does Retool have a native Marvel connector?

No, Retool does not have a native Marvel connector. The primary integration pattern is a design workflow: use Marvel to wireframe Retool app layouts, share prototypes for stakeholder approval, then build in Retool following the approved wireframes. For programmatic project metadata access, connect Marvel's REST API as a Retool REST API Resource using a Token authentication header.

### What is the difference between using Marvel versus Figma for Retool wireframing?

Marvel is optimized for speed — it takes less time to create a clickable prototype in Marvel than in Figma, making it better for early-stage ideation and rapid stakeholder validation. Figma offers higher visual fidelity, a more detailed Inspect panel for developer handoff, and a larger component ecosystem. For Retool layout planning, Marvel's speed advantage often outweighs Figma's detail advantages — use Marvel for initial wireframing and Figma if you need pixel-accurate design specs.

### Do I need the Marvel API to use Marvel with Retool?

No. The most common Marvel+Retool integration is purely a design workflow: create wireframes in Marvel, share prototype links with stakeholders, and use those designs as building blueprints in Retool. The Marvel API is only needed if you want to build a programmatic documentation dashboard that indexes your Marvel projects and tracks design-to-build pipeline status. API access requires a Marvel Pro plan.

### How do I ensure my Marvel wireframe accurately represents what Retool can build?

Study Retool's component library (Tables, Forms, Charts, Stat components, Tabs, Containers, Buttons) before wireframing in Marvel. Use simple rectangles and labels to represent each Retool component — avoid designing UI elements that don't exist in Retool's library (like custom dropdowns or drag-and-drop lists) unless you're planning to use Retool's Custom Component feature. Reference Retool's 12-column grid when sizing wireframe elements.

### Can I embed a Marvel prototype directly inside a Retool application?

Yes. Use Retool's IFrame component and set the Src to your Marvel prototype URL with the ?emb=1 parameter appended (e.g., https://marvelapp.com/prototype/YOUR_ID?emb=1). Ensure the Marvel prototype's sharing is set to 'Anyone with the link can view'. The embed mode removes Marvel's header bar and shows just the prototype, which is better for Retool's panel layout. Stakeholders can click through the prototype directly from the Retool app.

---

Source: https://www.rapidevelopers.com/retool-integrations/marvel
© RapidDev — https://www.rapidevelopers.com/retool-integrations/marvel