canvas

Coordinate and preview UI layouts using iframe-backed shapes on a canvas.

5|21|Updated Jun 12, 2025

Search Tags:#layout #canvas #iframe #mockup #ui-preview #shape-management #design-tool

Ready to run

npx skills add https://github.com/Exocore-Organization/exocore-web --skill canvas-exocore-organization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Exocore-Organization/exocore-web/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Exocore-Organization/exocore-web --skill canvas-exocore-organization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing and previewing complex UI layouts on a shared, infinite canvas can be tedious without a structured approach to embed live content and manage the lifecycle of previews.

Core Features & Use Cases

Place and manage iframe-backed shapes on the canvas to create design mockups and component previews.
Enforce iframe lifecycle with building, modifying, and live states, plus secure HTTPS URLs and clear labeling via componentName and componentPath.
Real-world use cases include prototyping dashboards, ideating multi-frame layouts, and showcasing live content in sandboxed previews.

Quick Start

Place building placeholders on the canvas with getCanvasState, create iframe shapes in state building, and update them to live URLs when ready.

Frequently Asked Questions about canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create UI mockups with live iframe previews on a canvas?▼

You can create UI mockups by placing iframe-backed shapes on a canvas, transitioning them from building placeholders to live URLs using getCanvasState and applyCanvasActions for real-time component previews.

What is the iframe lifecycle when managing canvas layout previews?▼

The iframe lifecycle for canvas layout previews includes building, modifying, and live states, enforcing secure HTTPS URL validation and clear labeling via componentName and componentPath throughout the shape management process.

Can I prototype multi-frame dashboards using a shared infinite canvas?▼

Yes, you can prototype dashboards and ideate multi-frame layouts by placing and updating iframe-backed shapes across a shared canvas, enabling structured design exploration and live sandboxed content showcasing.

How do I update canvas shapes from building placeholders to live URLs?▼

To update canvas shapes, use getCanvasState to retrieve current building placeholders, then applyCanvasActions to transition iframe shapes to live URLs once your component previews are ready for deployment.

Are HTTPS URLs required for embedding iframe content in canvas previews?▼

Yes, secure HTTPS URLs are required for embedding iframe content in canvas previews, ensuring sandboxed and secure live content presentation while managing shape lifecycles across multiple frames.

What's the best way to manage component previews across multiple canvas frames?▼

The best way to manage component previews across multiple frames is using structured shape metadata and lifecycle states, coordinating placement and updates through getCanvasState and applyCanvasActions for organized artifact presentation.