Query content with GraphQL
Query content with GraphQL
Source content from GitHub, Figma, or Trello.
Process on the fly
Process on the fly
Process Markdown, images, and records.
Query your existing content with GraqhQL
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
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
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.