Create Your First Extension

How to build your first extension and use it in Stage.

Create a new extension

Creating a extension is as simple as calling stage init which creates a new extension in the current folder. You will be prompted question in order to complete the process. The final file structure is as followed:

|-assets
    |-extension-icon.png
|–src
    |-index.tsx
|–tsconfig.json
|–package.json
|-.eslintrc.json
|–.prettierrc

Build the extension

Your main working file would be src/index.tsx, but you can also create subfolders in src if needed. The example file will look like this:

import { Block, List } from "@stagehq/ui";
import * as API from "@stagehq/api";
import { useEffect, useState } from "react";

export default function Extension() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const response = await API.gh.get("/repos/owner/repo/issues");
      setData(response.data);
    };
    fetchData();
  }, []);

  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      size={2}
    >
      <List>
        {data.map((item) => (
          <List.Item key={item.id} title={item.title} />
        ))}
      </List>
    </Block>
  );
};