present is a Next.js template for building data visualisation dashboards and charts with D3.js and Material UI, ready to run locally with two npm commands. The template combines the server-rendering power of Next.js with the expressive data-binding of D3.js, giving developers a ready-made starting point for interactive visual content. It is open source and hosted on GitHub under the repository name 'present', with a description that identifies it as a data visualisation project built on D3.js. The project is written in JavaScript and uses React components, so it fits into the standard Node.js and React ecosystem.
What is present?
present is an open-source starter template for data visualisation applications. It takes a Next.js project structure and pre-configures it with @mui/material and its peer dependencies, including emotion, the default style engine in MUI v5. This means you get a server-rendered React app out of the box, with a component library tailored for building charts, tables, and dashboards. The template does not include a specific visualisation implementation; instead, it sets up the dependencies and folder conventions so you can add your own D3.js charts.
What makes present stand out?
- Next.js framework — The template is built on Next.js, which provides server-side rendering, static generation, and a file-based routing system, making it suitable for production-grade data applications.
- D3.js ready — The repository metadata lists D3.js as a primary topic, indicating the template is designed for creating custom, data-driven visualisations with the D3.js library.
- MUI v5 with emotion — Styling comes from
@mui/materialusing emotion, the default style engine in MUI v5. You can swap emotion for styled-components if you prefer, as noted in the template's documentation. - Simple setup — After cloning, you only need to run
npm installandnpm run devto start the development server. - Vercel deployment — The repository topics include Vercel, pointing to a deployment target that works natively with Next.js projects.
- JavaScript codebase — Written in JavaScript, so no additional TypeScript compilation step is required; it runs directly on Node.js.
Who should use present?
- Front-end developers — who want to skip the initial configuration and jump straight into building D3.js visualisations inside a React/Next.js application.
- Data analysts and journalists — who need a dependable starting point for creating interactive charts and data stories that can be served via a web app.
- Teams prototyping dashboards — who can use the template as a base to lay out Material UI components and embed D3 charts for internal analytics views.
What can you do with present?
- Build custom D3 charts — Combine D3's data-joining methods with React components to render dynamic, interactive visualisations.
- Assemble UI with MUI — Use Material UI components for navigation, cards, tables, and forms around your visualisations.
- Deploy to Vercel — Since the template is Next.js-based, it can be deployed to Vercel with minimal configuration, taking advantage of serverless functions if needed.
The template is intentionally minimal; the focus is on scaffolding rather than delivering a complete dashboard out of the box. That gives you the freedom to structure the project around your own data sources and visualisation needs.
