• Documentation
    • Search documentation
    karat

    +

    K

    API Reference ↗
    Use case developmentCustom widgetsAdd an additional widget to a widget set

    Add an additional widget to a widget set

    Widget sets allow you to publish multiple widgets from a single code repository for code sharing and performance optimizations. This page explains how to add an additional widget to a widget set and assumes a project structure starting from our provided templates using React, Vite, and @osdk/widget.vite-plugin ↗.

    A widget set can contain a maximum of 50 widgets.

    The following project structure contains two widgets:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
repo/
├── src/
│   ├── first.tsx
│   ├── first.config.ts
│   ├── second.tsx
│   ├── second.config.ts
│   └── ...
│── first.html
│── second.html
│── vite.config.ts
└─ ...

    Define an additional widget

    Create a new TypeScript file to define the widget's metadata with defineConfig for type safety:

    Copied!
    1
2
3
4
5
6
7
8
9
10
import { defineConfig } from "@osdk/widget.client";

export default defineConfig({
  id: "secondWidgetId",
  name: "Second Widget",
  description: "A second widget",
  type: "workshop",
  parameters: {},
  events: {},
});

    Create a new TypeScript file as the entrypoint to render your widget, and provide the context for parameters and events:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
import { FoundryWidget } from "@osdk/widget.client-react";
import { createRoot } from "react-dom/client";
import Second from "./second.config.js";

const root = document.getElementById("root")!;

createRoot(root).render(
  <FoundryWidget config={Second}>
    {/* Render something for the widget! */}
  </FoundryWidget>,
);

    Include the additional widget in the widgets manifest

    Create a new HTML file to load the entrypoint script:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Widget: Ontology SDK + React</title>
    </head>
    <body>
        <script type="module" src="/src/second.tsx"></script>
    </body>
</html>

    Configure Vite to include the new HTML file during builds:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
import foundryWidgetPlugin from "@osdk/widget.vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [foundryWidgetPlugin()],
  build: {
    rollupOptions: {
      input: ["./first.html", "./second.html"],
    },
  },
});

    Run npm run build. The generated .palantir/widgets.config.json manifest in the production build now contains the additional widget.

    Preview and publish the additional widget

    Use dev mode to preview the unpublished widget in the custom widgets playground or a VS Code workspace. You do not need to publish the widget before continuing development.

    Before you can select the additional widget in Workshop, you must publish a new version of the widget set. After the first release, you can use dev mode to preview further unpublished changes directly in Workshop.