TanStack Start Integration

Getting your content to your TanStack Start site is as simple as using the Marble SDK. This guide will walk you through setting up a blog with Marble and TanStack Start. If you want to get started quickly, you can clone our TanStack Start blog template. To create a new TanStack Start project, run:

npx create-start-app@latest

Install the SDK

Install the Marble SDK in your TanStack Start project:

npm install @usemarble/sdk

pnpm add @usemarble/sdk

yarn add @usemarble/sdk

bun add @usemarble/sdk

Set up environment variables

Add your Marble API key to your environment variables. Create a .env file in the root of your TanStack Start project:

.env

MARBLE_API_KEY=your_api_key_here

While public API keys are currently read-only, they should be used on the server-side whenever possible to prevent your rate limits from being exhausted by others.

You can find your API Key in your Marble dashboard under Settings > API Keys.

Create a Marble client

Create a shared Marble client instance. Create a file at lib/marble.ts:

lib/marble.ts

import { Marble } from "@usemarble/sdk";

export const marble = new Marble({
  apiKey: process.env["MARBLE_API_KEY"] ?? "",
});

Display a list of posts

Use the Marble client in a TanStack Start route to fetch and display your posts. Create a file at src/routes/posts/index.tsx:

src/routes/posts/index.tsx

import { createFileRoute, Link } from "@tanstack/react-router";
import { marble } from "@/lib/marble";

export const Route = createFileRoute("/posts/")({
  component: PostsPage,
  loader: async () => {
    const result = await marble.posts.list({ limit: 10 });
    const data = await result.next();
    return { posts: data.value?.posts ?? [] };
  },
});

function PostsPage() {
  const { posts } = Route.useLoaderData();

  if (!posts.length) return <div>No posts found</div>;

  return (
    <section>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to="/posts/$slug" params={{ slug: post.slug }}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

Display a single post

Create a dynamic route at src/routes/posts/$slug.tsx to display individual posts:

src/routes/posts/$slug.tsx

import { createFileRoute } from "@tanstack/react-router";
import { marble } from "@/lib/marble";

export const Route = createFileRoute("/posts/$slug")({
  component: PostPage,
  loader: async ({ params }) => {
    return await marble.posts.get({ identifier: params.slug });
  },
});

function PostPage() {
  const { post } = Route.useLoaderData();

  if (!post) return <div>Post not found</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <article dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );
}

A note on dangerouslySetInnerHTMLWe use dangerouslySetInnerHTML to render the HTML content of your post. Marble sanitizes all HTML content before it’s sent to you, so you can be confident that it’s safe to render in your application.

Example Styling (Optional)

To improve the appearance of your content, you can use Tailwind CSS Typography to add beautiful typographic defaults. We provide a simple Prose component that makes it easy to style your Marble content.First, install the Tailwind CSS Typography plugin:

npm install -D @tailwindcss/typography

Add it to your Tailwind CSS configuration. If you’re using Tailwind CSS v4:

src/styles.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

For Tailwind CSS v3, add it to your tailwind.config.js:

tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@tailwindcss/typography"),
    // ...
  ],
};

Now create a Prose component that you can use to style your content. Create components/Prose.tsx:

components/Prose.tsx

import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "react";

type ProseProps = HTMLAttributes<HTMLElement> & {
  as?: "article";
  html: string;
};

export function Prose({ children, html, className }: ProseProps) {
  return (
    <article
      className={cn(
        "prose prose-h1:font-bold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl prose-headings:font-serif prose-headings:font-normal mx-auto",
        className
      )}
    >
      {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
    </article>
  );
}

Note: This component assumes you have a cn utility function for combining class names. You can install and set up clsx or use a similar utility, or simply replace cn() with string concatenation.

Now you can update your post page to use the Prose component:

src/routes/posts/$slug.tsx

import { createFileRoute } from "@tanstack/react-router";
import { marble } from "@/lib/marble";
import { Prose } from "@/components/Prose";

export const Route = createFileRoute("/posts/$slug")({
  component: PostPage,
  loader: async ({ params }) => {
    return await marble.posts.get({ identifier: params.slug });
  },
});

function PostPage() {
  const { post } = Route.useLoaderData();

  if (!post) return <div>Post not found</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <Prose html={post.content} />
    </div>
  );
}

This will give your content beautiful, readable typography with proper spacing, font sizes, and styling for headings, links, images, and other elements. You can customize the styles by modifying the classes in the Prose component or by extending the typography configuration in your Tailwind config.For more information about customizing the typography styles, check out Tailwind CSS Typography!

Getting Started

Concepts

Features

Integrations

Tools

Recipes