Project Logo

CollectedQuery and process content intuitively with GraphQL

Try It Out
Read the Docs

Query content with GraphQL

Source content from GitHub, Figma, or Trello.

Process on the fly

Process Markdown, images, and records.

Query your existing content with GraqhQL

One place to query from GitHub, Trello, and Figma — all at once. Use SHAs to speed up with caching.

query {
  gitHubRepoSource(
    owner: "RoyalIcing",
    repoName: "collected.guide",
    branch: "8cb73f4d3ebebe14c0eb49ffc5369817032567a2"
  ) {
    home: textMarkdown(path: "content/README.md") {
      text
      toHTML {
        html
      }
    }
  }

  trelloBoardSource(boardID: "6bi5Hyct") {
    lists {
      name
      cards {
        content {
          text
        }
      }
    }
  }
}

Try it Out

You can get started with Collected in any JavaScript project. We have specific packages for React and Vue too.

  • React: npm add @collected/react
  • Vue: npm add @collected/vue
  • Core: npm add @collected/core
import React from "react";
import { useCollectedQL } from "@collected/react";
import ReactMarkdown from "react-markdown";

function Home() {
  const { source: { home } } = useCollectedQL(`
{
  source: gitHubRepoSource(
    owner: "RoyalIcing",
    repoName: "collected.guide",
    branch: "8cb73f4d3ebebe14c0eb49ffc5369817032567a2"
  ) {
    home: textMarkdown(path: "content/README.md") {
      text
    }
  }
}
`);

  return <article>
    <ReactMarkdown source={home.text} />
  </article>;
}

Learn How

You can build dynamic sites on Cloudflare Workers, dynamic sites on Node.js, and static sites.

You can prototype with content sourced from Trello. This lets you build something in minutes, plus the content can be managed by anyone with access to the Trello board.

You can manage content in GitHub, and then load it on-the-fly via jsDelivr, a multi-provider CDN. Point your app to a new commit sha, and it will update live, without having to redeploy. This means you can have rapidly changing content — and server render it too.

If a static website is all you need, then Collected also supports workflows that build to static HTML.