Getting Started 🚀
Ready to build your own decentralized social stream? Let's get you set up.
Installation
The core components are published to npm as @nonactivity.stream/elements. They are pure Lit Web Components, meaning they work everywhere: React, Vue, Svelte, Next.js, or just plain HTML.
npm install @nonactivity.stream/elementsOr, if you're feeling rebellious and want to skip the build step entirely, just use a CDN:
<script type="module" src="https://unpkg.com/@nonactivity.stream/elements"></script>Usage in Plain HTML
The easiest way to get started is to drop the script tag into an HTML file and start feeding it ActivityStreams 2.0 data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Indie Feed</title>
<!-- Import the components -->
<script type="module" src="https://unpkg.com/@nonactivity.stream/elements"></script>
</head>
<body>
<!-- The component itself -->
<non-activity-stream id="my-feed"></non-activity-stream>
<script>
const feed = document.getElementById('my-feed');
// Feed it standard ActivityStreams 2.0 data!
feed.collection = {
"@context": "https://www.w3.org/ns/activitystreams",
"type": "OrderedCollection",
"totalItems": 1,
"orderedItems": [
{
"type": "Note",
"content": "Hello, decentralized world! 🌍",
"published": "2026-02-19T12:00:00Z"
}
]
};
</script>
</body>
</html>Usage in React / Next.js
Because these are standard Web Components, you can use them in React. You just need to make sure you register the custom element and pass complex data (like objects) via a ref instead of a standard prop.
import React, { useEffect, useRef } from 'react';
// Import the specific component you need
import NonActivityStream from '@nonactivity.stream/elements/nonactivity-stream';
// Register the custom element with the browser
NonActivityStream.define();
const MyFeed = ({ as2Collection }) => {
const streamRef = useRef(null);
useEffect(() => {
if (streamRef.current) {
// Pass the complex object directly to the DOM element's property
streamRef.current.collection = as2Collection;
}
}, [as2Collection]);
return (
<div>
<h1>My Social Stream</h1>
<non-activity-stream ref={streamRef}></non-activity-stream>
</div>
);
};
export default MyFeed;What's Next?
Now that you have a basic feed rendering, you probably want to make it interactive. Right now, it's just a "dumb" UI.
To add features like liking, replying, and drag-and-drop reordering, you need to learn about Controllers.