English · Português · Español · Français · Deutsch · Italiano · Nederlands · Polski · Русский · Українська · Türkçe · العربية · हिन्दी · 日本語 · 简体中文
The hosted URL is a secure, read-only visualization of the bundled simplicio-loop example. Clone this repository and run the default build locally when you need folder/GitHub import or editing.
The orchestration skill used for the example is available as the Python package simplicio-loop==3.31.1:
python3 -m pip install simplicio-loop==3.31.1
Open a folder. See its languages, files, imports, and architecture as a workspace you can assemble.
Simplicio Canvas is an early local-first prototype for visual programming. Its default workspace is the public wesleysimplicio/simplicio-loop project, represented by a safe bundled snapshot. It turns a project folder into colored puzzle pieces on a Three.js canvas inside a VS Code-like workspace:
- Color represents the software layer: presentation, application, domain, infrastructure, tests, docs, and configuration.
- Pieces represent responsibilities such as screen, service, entity, repository, adapter, and test.
- Curves represent real internal imports detected from source files.
- Click a file to inspect language, imports, reverse imports, and its source in a read-only terminal.
- Drag a piece in the local build to rearrange the architecture view without changing the source tree. The hosted demo is intentionally read-only.
The hosted demo reads only its bundled example. In the local build, selected folders are analyzed in browser memory; GitHub imports use the guarded local bridge or bounded public API fallback. Source contents are not uploaded to a Simplicio service.
git clone https://github.com/wesleysimplicio/simplicio-canvas.git
cd simplicio-canvas
npm install
npm run devOpen the local URL and choose either (the public URL intentionally exposes neither control):
- Open folder — authorize a folder already on the machine.
- GitHub — enter a public
owner/repository; the guarded local Vite bridge performs a shallow clone under.simplicio/workspaces, attemptssimplicio-mapper, and the browser has a public-API fallback when the local bridge is unavailable.
The first screen already opens the official wesleysimplicio/simplicio-loop example. Run npm run bootstrap to emit a local JSON readiness receipt for simplicio-mapper, the installed simplicio-loop CLI and its project skill. The command is dry-run by default; node scripts/bootstrap.mjs --repair is the explicit opt-in repair path.
Measured in a local Playwright session at 1440×641 CSS pixels.
| Phone portrait | Phone landscape |
|---|---|
 |
 |
| Tablet | Desktop |
|---|---|
 |
|
The gallery above is captured evidence of the current local build; future Mapper FLOW and runtime-trace views remain roadmap items until their artifacts are available.
More captured evidence
| Area | Current behavior |
|---|---|
| Languages | TypeScript, JavaScript, Python, Rust, Go, C#, Java, Kotlin, frontend/config formats and documentation |
| Relations | TypeScript/JavaScript and Python imports, with internal path resolution and external package detection |
| Privacy | Local browser memory only; ignores .git, node_modules, environments, build artifacts, binaries, and files larger than 1 MB |
| Interaction | Orbit, zoom, drag pieces, inspect source and dependencies |
| Rendering | Three.js puzzle pieces, labels, layers and dependency curves |
This is deliberately a static-analysis MVP. It does not write source files, run code, or claim complete call-graph accuracy.
The product direction is semantic zoom rather than a flat graph:
ecosystem → project → layer / flow → file → class / method
The next capability is to enrich this view with stable symbols, call graphs, end-to-end flows, safe visual refactors, diff previews, validation, and undo.
The canonical roadmap lives in GitHub milestones and GitHub issues. Local planning files are reference exports only.
For a richer model of a real repository, generate mapper artifacts locally:
simplicio-mapper scan /path/to/project --sync --await --json
simplicio-mapper inspect /path/to/project --jsonThen use Import map in the UI to load a JSON artifact. The current importer reads artifact paths; consuming the complete mapper symbol, call-graph, and flow contracts is the next integration milestone.
npm test
npm run buildThe domain analyzer and visual grammar are covered by Vitest. Browser proof is captured with Playwright.