TileflowDocs

Quickstart

Render your first Tileflow map

This path uses React and Vite. Install the compiler, one runtime, one framework adapter, and the CLI used to initialize and validate the map.

No account or API key is required for local development.Hosted deployment currently requires approved access and a pre-provisioned project key.
Terminal
pnpm add @tileflow/core@alpha @tileflow/react@alpha maplibre-gl
pnpm add -D @tileflow/vite@alpha @tileflow/cli@alpha

Package roles

Choose one runtime and one adapter

Do not install every framework package. A normal app uses the core compiler, the CLI, one UI runtime, and the adapter that matches its build framework.

@tileflow/coreAlways: typed config, validation, and the MapLibre style compiler.@tileflow/cliRecommended dev dependency for init, validate, preview, build, and deploy.react | vue | svelteChoose one runtime component for the UI framework used by the app.vite | next | webpackChoose one adapter for local assets, manifests, and production builds.@tileflow/staticOptional schemas and request helpers for deterministic PNG map images.
1

Initialize tileflow.config.ts

The CLI creates a working starter with a named madrid map. Keep the file at the project root and edit it like normal product code.

Terminal
pnpm exec tileflow init

See Configuration for the complete typed shape and the semantic styling fields.

2

Add the Vite adapter

Add tileflow() alongside the framework plugin already present in vite.config.ts. It serves the manifest and fresh style JSON from the same development server as the app.

vite.config.ts
import react from "@vitejs/plugin-react";
import { tileflow } from "@tileflow/vite";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [react(), tileflow()],
});
3

Render the named map

The component resolves madrid through the local manifest. Native MapLibre constructor options go in mapOptions; direct props such as center, zoom, and interactive take priority.

src/MadridMap.tsx
import { Map } from "@tileflow/react";
import "maplibre-gl/dist/maplibre-gl.css";
 
export function MadridMap() {
  return (
    <Map
      map="madrid"
      center={[-3.7038, 40.4168]}
      zoom={12}
      height={420}
      mapOptions={{
        cooperativeGestures: true,
        maxZoom: 18,
      }}
    />
  );
}
4

Start the app development server

Start the app normally. The adapter reads tileflow.config.ts, validates it, serves fresh style JSON, and reloads the map when the config changes.

Terminal
pnpm dev
 
# Vite serves:
# /tileflow/manifest.json
# /tileflow/styles/madrid.json

Other stacks

Use the same workflow everywhere

The config and named-map contract stay the same. Only the runtime component and framework adapter change.

Next.jsVueSvelteWebpack