What Can I Find on the Liveweave Showcase Page?

The Liveweave Showcase is a gallery of small HTML, CSS, and JavaScript experiments ("weaves") built in the Liveweave Playground. You can open any project to see how its HTML, CSS, and JavaScript work together, then remix it with AI assistance to make it your own. It's most useful if you want working examples to learn from or a starting point to build on, rather than a blank editor.

What the Showcase contains

Each entry is a complete, runnable front-end project. The page presents them as cards with a title, a visibility count, and a short tag (for example, T9fA2C). Examples listed on the page include:

  • Blinking eyes using HTML and CSS (no JS) — 105 views
  • Retro cassette tape player using HTML and CSS (no JS) — 53 views
  • Neon Jellyfish using HTML and CSS (no JS) — 50 views
  • 3D wireframe world — 59 views
  • Simple Mini-golf game — 226 views
  • Interactive plasma field — 130 views
  • Animated Robot using HTML and CSS (no JS) — 126 views
  • Logo design using HTML and CSS — 134 views
  • Simple aquarium using HTML and CSS (no JS) — 119 views

The set spans animation, small games, and graphic/logo design, so it doubles as a sample of what the editor can produce. The gallery is paginated (page numbers 1, 2, 3 appear at the bottom).

How to use a weave

  1. Open a project — click any card to load its HTML, CSS, and JavaScript into the editors.
  2. Read the code alongside the result — the live Preview shows the rendered output, so you can connect each rule or function to what you see.
  3. Remix it — use the AI assistant to modify the project, then keep, change, or undo its suggestions yourself.
  4. Start your own — the "Start coding" button takes you from the Showcase into a fresh workspace.

The point of opening a weave is to see the three languages working together in one place, not just to view a finished demo.

The AI assistant on the Showcase

The Showcase promotes a generative and agentic AI assistant that sits beside the editors and considers the project in front of you. According to the page, you can ask it to:

  • Explain a function
  • Fix a layout
  • Make something responsive
  • Suggest an animation

The described flow is Understand → Suggest → Assist → Refine: it reads your question, offers a direction, helps with the code, and iterates with you. You remain in control of what to apply.

Other tools reachable from here

The Showcase also links to tools beyond the HTML/CSS/JavaScript editor:

Tool What it does
Python Playground Run and experiment with Python in the browser, no setup or installation
SVG Graphics Editor Create scalable vector graphics visually, then use the SVG in any project
Color Explorer Explore palettes and color combinations for your design

When the Showcase is the right starting point

Use it if you learn best by reading and modifying working code, or if you want a concrete base for a layout, animation, or small game. If you already know what you want to build and don't need a reference, starting from a blank workspace is faster. The Showcase is a learning and remixing surface, not a template marketplace with documentation for each project.

liveweave.com
Explore HTML, CSS, and JavaScript experiments created with Liveweave.