$git clone https://github.com/datopian/portaljs---
| 1 | <p align="center"> |
| 2 | <img src="assets/portaljs-logo-spin.svg" alt="PortalJS" width="96" height="96" /> |
| 3 | <h1 align="center">PortalJS</h1> |
| 4 | <p align="center"> |
| 5 | <b>The AI-native framework for building data portals.</b> |
| 6 | <br /> |
| 7 | Describe the portal you want — your agent helps you choose an architecture, scaffolds it, and loads your data. |
| 8 | <br /> |
| 9 | <br /> |
| 10 | <a href="https://www.portaljs.com/docs">Docs</a> |
| 11 | · |
| 12 | <a href="https://github.com/datopian/portaljs/discussions">Discussions</a> |
| 13 | · |
| 14 | <a href="https://github.com/datopian/portaljs/issues/new">Report a bug</a> |
| 15 | <br /> |
| 16 | <br /> |
| 17 | <a href="https://www.npmjs.com/package/create-portaljs"><img src="https://img.shields.io/npm/v/create-portaljs?logo=npm&logoColor=white&label=create-portaljs&color=cb3837" alt="npm version" /></a> |
| 18 | <a href="https://github.com/datopian/portaljs/stargazers"><img src="https://img.shields.io/github/stars/datopian/portaljs?logo=github&logoColor=white&label=Stars&color=blue" alt="GitHub stars" /></a> |
| 19 | <a href="https://discord.gg/krmj5HM6He"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Join our Discord" /></a> |
| 20 | <a href="license"><img src="https://img.shields.io/badge/License-MIT-blue" alt="MIT License" /></a> |
| 21 | </p> |
| 22 | </p> |
| 23 | |
| 24 | --- |
| 25 | |
| 26 | ## Quickstart |
| 27 | |
| 28 | **Create a portal** — one command, nothing to install beyond Node 22+: |
| 29 | |
| 30 | ```bash |
| 31 | npm create portaljs@latest my-portal |
| 32 | cd my-portal |
| 33 | npm run dev # → http://localhost:3000 |
| 34 | ``` |
| 35 | |
| 36 | You get the three surfaces — Home, a Catalog (`/search`), and a dataset Showcase |
| 37 | (`/@<namespace>/<slug>`) — over sample data. Plain, editable Next.js, no lock-in. Add your |
| 38 | own CSV/JSON to `datasets.json` and it renders automatically. |
| 39 | |
| 40 | **Build it with your AI assistant** — PortalJS ships [Claude Code](https://claude.com/claude-code) |
| 41 | skills that do the assembly. Install them once (into `~/.claude/commands`): |
| 42 | |
| 43 | ```bash |
| 44 | curl -fsSL https://raw.githubusercontent.com/datopian/portaljs/main/scripts/install-portaljs-skills.sh | bash |
| 45 | ``` |
| 46 | |
| 47 | Then, in a Claude Code session from any directory: |
| 48 | |
| 49 | ```text |
| 50 | /portaljs-architect not sure what stack you need? start here |
| 51 | /portaljs-new-portal "Auckland Council open data portal" |
| 52 | /portaljs-add-dataset ./data/air-quality.csv |
| 53 | ``` |
| 54 | |
| 55 | `/portaljs-new-portal` scaffolds the three surfaces; `/portaljs-add-dataset` (or `/portaljs-add-resource`) loads data; |
| 56 | `/portaljs-connect-ckan` points it at a CKAN backend; `/portaljs-deploy` ships it. ([All skills + install →](.claude/INSTALL.md)) |
| 57 | |
| 58 | **Prefer the bare template** — plain Next.js, no AI, no lock-in: |
| 59 | |
| 60 | ```bash |
| 61 | npx tiged datopian/portaljs/examples/portaljs-catalog my-portal |
| 62 | cd my-portal && npm install && npm run dev # → http://localhost:3000 |
| 63 | ``` |
| 64 | |
| 65 | You get Home, a Catalog (`/search`), and a dataset Showcase (`/@<namespace>/<slug>`) over |
| 66 | sample data. Add your own CSV/JSON to `datasets.json` and it renders automatically. |
| 67 | |
| 68 | ⭐ If it's useful, a star helps others find it. |
| 69 | |
| 70 | ## Why PortalJS |
| 71 | |
| 72 | Building a data portal has always meant more than a website. You have to decide where |
| 73 | the data lives, how it's versioned, how people search it, how it's served, and how it's |
| 74 | governed — and then wire a frontend on top. Teams either over-build on a heavy data |
| 75 | warehouse they don't need, or under-build on a pile of scripts that doesn't scale. |
| 76 | |
| 77 | PortalJS is an **open-source, agentic skills framework that helps data teams build, |
| 78 | develop, and ship data portals — and the data infrastructure underneath them.** It isn't |
| 79 | only a frontend. The skills do two jobs: |
| 80 | |
| 81 | - **Advise** — given _what you're building_, _what your data is_, and _what it's for_, |
| 82 | they recommend an architecture: storage, compute, catalog, access, hosting, metadata. |
| 83 | - **Build** — they scaffold that stack as plain, editable Next.js code with no lock-in. |
| 84 | |
| 85 | It is **opinionated but open**: the recommended modern path is git + object storage |
| 86 | (Cloudflare R2) + Parquet, queried with [DuckDB](https://duckdb.org/) — an open lakehouse |
| 87 | instead of a classic warehouse. F |