component-canvas: Visualising Repository UI Components on a Single Canvas

X postIbelickTool

Ibelick has introduced 'component-canvas', a tool designed to render all components from a codebase onto an open canvas, showcasing their various states and variants.

Key points

  1. Renders all UI components from a code repository onto a shared canvas.
  2. Displays components side-by-side with their corresponding variants and states.
  3. Provides an immediate visual method for exploring and auditing an application's UI.

Why it matters

Auditing sprawling component collections can be cumbersome when navigating fragmented folders. Placing every component variant onto a single canvas lets designers and developers instantly spot visual regressions and styling inconsistencies.

Analysis

Rather than relying on isolated component navigation like standard Storybook setups, component-canvas prioritises an all-in-one macro view. This approach offers a frictionless way to review design systems and inspect UI completeness directly from the codebase.

Original post

Ibelick

@Ibelick · 13 October 2026

new skill: component-canvas. it puts all the components from a repo on a canvas, with all their variants and states. a nice way to explore the UI of a codebase. t.co/HumaAEWAci

1.2k likes30 replies1.6k bookmarks49.3k views

View on X
More posts in the thread (1)
  1. t.co/rP1I6bE29M
Selected replies (5)
  • @_cmd8 @Ibelick why not use storybook?
  • @tomaslau @Ibelick I love putting everything on one page
  • @ledihildawan @_cmd8 @Ibelick These days, people have plenty of free time. Creativity is wide open. Just give a prompt, and something comes to life.
  • @danielfransix @Ibelick t.co/Yy58yKYHkN i built sth that does this for both your components and all your screens in the web app.
  • @dezign_ash @Ibelick This is basically a living design system audit. Seeing every variant side by side is where you catch the 4 slightly different button paddings nobody noticed.

Mentioned links

Summary generated by AI (Gemini 3.8 Flash, 15 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:DavidHDev/canvas-ui

    Canvas UI: Creative WebGL and Shader Effects for HTML Interfaces

    Canvas UI is a component library that renders canvas effects—such as fluid simulations, shaders, and 3D scenes—directly over live, interactive HTML interfaces. It is framework-agnostic and supports React, Vue, Svelte, and vanilla JavaScript.

    4.9kstarsTypeScript

    Web development· Tool

  • X post:Ruturaj

    Uiverse.io: Open-Source Platform for CSS and UI Components

    Ruturaj highlights uiverse.io as a resource for custom frontend elements. The platform hosts thousands of open-source CSS and UI components, including buttons, loaders, inputs, and cards, ready to preview and copy with one click.

    402bookmarks19kviews

    Web development· Resource

  • X post:Ali Bey

    Launch of Rewamp UI: New Open-Source Component Library

    Ali Bey highlights the release of Rewamp UI, a new free open-source component collection by developer Palak offering over 70 web components.

    40bookmarks12.5kviews

    Web development· Announcement

  • X post:0xMarioNawfal

    Open-source repositories to upgrade UI design in AI coding agents

    An X post highlights open-source repositories designed to equip AI coding tools like Claude Code, Cursor, and Codex with design systems, MCP integrations, and anti-template guardrails.

    6.5kbookmarks264.2kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.