getartisanflow

getartisanflow / alpineflow

Public

The flowchart engine Alpine.js never had. Directive-driven node-based UIs with animation, layout, and collaboration.

artisanflow.dev alpinejs canvas dag diagram drag-and-drop
10
0
100% credibility
Found Apr 07, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

AlpineFlow is a plugin for Alpine.js that provides an easy way to create interactive flow diagrams and node graphs using simple HTML directives.

How It Works

1
🔍 Discover AlpineFlow

You find a simple tool that lets you build interactive diagrams right in your webpage without complicated coding.

2
📦 Add to your page

You include the tool in your project with a quick copy-paste command.

3
🎨 Create your canvas

You add a special area on your page where your diagram will live and appear.

4
🔗 Build your flow

You drag in boxes, connect them with lines, and watch your ideas come to life visually.

5
✨ Add animations and extras

You make your diagram move, zoom smoothly, or even collaborate with friends in real time.

🚀 Share your masterpiece

Your interactive diagram is ready to show the world, looking professional and fun to explore.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is alpineflow?

Alpineflow brings node-based flowcharts and interactive diagrams to Alpine.js apps via simple x-flow-* directives, letting you drop in flowCanvas data with nodes and edges for instant visual editing. It handles layout with engines like Dagre or Elk, smooth animations like path-following nodes, and real-time collaboration via Yjs—perfect for flowchart diagram github readmes or live engineering flowchart examples. Built in TypeScript, it outputs structured UIs without React Flow's bundle size or boilerplate.

Why is it gaining traction?

Unlike heavyweight flowchart js github libs, it leverages Alpine's lightweight reactivity for directive-driven nodes, edges (7 types including editable bezier), and canvas controls like minimap and auto-pan—users get pro features like compute pipelines and multi-user cursors fast. The hook is zero-config collaboration and animations (orbit, wave paths) that feel native, standing out in flowchart editor github searches for alpine flowers simplicity over engineering flowchart wd40 duct tape hacks.

Who should use this?

Frontend devs on Alpine.js teams building visual tools like flowchart engineering design process editors, node-graph debuggers, or collaborative whiteboard flows. Ideal for flowchart engineer roles prototyping engineering flowchart lsu diagrams or open source flowchart github markdown visuals without framework lock-in.

Verdict

Promising early-stage pick for Alpine.js flowchart fun github projects (10 stars, 1.0% credibility)—solid docs and TypeScript types make it playable now, but wait for more adoption if stability matters. Try the playground for quick wins in node-based UIs.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.