portaljs
🌀 AI-native framework for building data portals. Scaffold a full portal from a brief and load datasets in minutes with agentic skills — any backend (CKAN, GitHub, Frictionless).
What is it?
What it is
PortalJS is an open‑source, AI‑native framework that lets teams build, develop, and ship data portals using plain, editable Next.js code. It combines agentic skills that advise on architecture and scaffold the three core surfaces—Home, Catalog, and Showcase—while decoupling the user interface from the data source via a DataProvider contract.
Why it exists
Building a data portal traditionally requires juggling data storage, compute, cataloging, governance, and front‑end wiring, often leading to over‑built warehouses or fragile scripts. PortalJS was created to provide a single, opinionated yet open path that recommends the right stack, scaffolds it automatically, and keeps the portal code portable and lock‑in free.
Who should use it
Data teams, developers, and organizations seeking to build open-source data portals with AI-assisted architecture and scaffolding.
Who should avoid it
Teams without AI integration needs, those preferring closed-source solutions, or lacking technical expertise in Next.js/TypeScript.
How it works
A quick walkthrough in plain English
How portaljs works in 4 steps
Step 1 of 4
Something triggers the flow
A schedule, webhook, or manual click tells portaljs to start.
Features
Advantages
- Rapid portal creation with AI assistance
- Decoupled architecture allows backend swapping without UI changes
- Open-source and license-friendly
- Default to scalable, cost-effective open lakehouse
- Built-in data quality checks and schema inference
- Automatic DCAT feed support for harvesting
- Easy deployment to Cloudflare Pages via PortalJS Arc
- Extensible skill set for custom features
- Supports large datasets via Git LFS and R2
- Transparent, editable Next.js codebase
- Community-driven with Discord and discussions
Disadvantages
- Requires Node 22+ and TypeScript knowledge
- Relies on Cloudflare ecosystem (though S3-compatible)
- Learning curve for agentic skill usage
- Limited to Next.js front-end framework
- Potential performance limits for very large datasets without optimization
- Requires manual configuration for advanced backends
- Community and ecosystem still growing, may lack mature plugins
- Dependency on Claude Code skills for AI features
- May need additional setup for non-Cloudflare storage options
Installation
native
npm create portaljs@latest my-portal cd my-portal npm run dev # → http://localhost:3000
FAQ
How do I get started with PortalJS?
You can quickly create a new portal by running `npm create portaljs@latest my-portal` in your terminal. This scaffolds a Next.js application with Home, Catalog, and Showcase surfaces over sample data.
What are 'agentic skills' and how do I use them?
Agentic skills are Claude Code slash commands that help you architect, scaffold, and manage your portal. After installing them via the provided curl script, you can use commands like `/portaljs-architect` to get infrastructure recommendations or `/portaljs-add-dataset` to automatically register new data.
Is there vendor lock-in with PortalJS?
No. PortalJS is designed to be open and portable. The agentic skills generate plain, editable Next.js code, and the architecture supports various backends (CKAN, Socrata, GitHub, etc.) through a pluggable DataProvider contract.
What is the recommended data architecture?
The framework recommends a modern 'open lakehouse' approach using Git, Cloudflare R2 (S3-compatible object storage), and Parquet files queried via DuckDB, though it also supports traditional warehouses and CKAN backends.
Can I add geospatial data to my portal?
Yes. Using the `/portaljs-add-geo` skill, you can auto-ingest files like GeoJSON, Shapefiles, or KML. The skill normalizes the CRS to EPSG:4326 and generates both PMTiles for interactive mapping and GeoParquet for querying.
Featured in Videos
YouTube tutorials and walkthroughs for portaljs
Alternatives
Similar projects ranked by category, topics, and text overlap.
