gitmyhub

remarkable

TypeScript ★ 35 updated 25d ago

Sanity + Next.js Presentation visual page builder — canvas editing, drag reorder, 3D logo

A Next.js and Sanity based website template that lets you visually build agency style pages from drag-and-drop blocks with live click-to-edit editing.

Next.jsSanityTypeScriptReactsetup: moderatecomplexity 3/5

Remarkable is a template for building a creative agency style website using Next.js paired with Sanity, a content management system. Its main idea is to move away from rigid, pre-made page templates and instead let someone build pages visually out of a set of reusable building blocks, dragging things into place and clicking directly on elements on the page to edit their content, rather than editing everything through a separate admin form.

The building blocks include things like headings, paragraphs, images, buttons, cards, sliders, and grids, and each one exposes its own visual controls, such as size, color, alignment, and drag sliders for things like maximum width or spacing. Container blocks like grids and sliders can hold other blocks inside them, so pages can be nested and composed freely rather than being limited to a fixed layout. A higher level container called a Section controls overall theme, choosing between light, dark, or brand styling that automatically cascades down to every block placed inside it, along with padding, layout width, and an optional background image.

Getting started involves installing the Node dependencies, connecting the project to a Sanity account either through a guided setup command or by manually filling in a few environment variables, and optionally importing a bundled demo dataset so there is example content to look at immediately. Running the development server gives you the public website, an embedded content editing studio, and a visual Presentation mode inside that studio where you can see and edit the live page directly.

The README also documents the project's internal structure, showing how pages are rendered from sections and blocks, where the schema definitions for each block type live, and the steps for adding an entirely new block type to the system. It includes a small set of npm scripts for running the dev server, building for production, type checking, and regenerating the demo content file. The README does not mention a license.

Where it fits