# 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` ↗](https://www.npmjs.com/package/@osdk/widget.vite-plugin).

A widget set can contain a maximum of 50 widgets.

The following project structure contains two widgets:

```text
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:

```TypeScript tab="second.config.ts"
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:

```TypeScript tab="second.tsx"
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:

```html tab="second.html"
<!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:

```TypeScript tab="vite.config.ts"
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](../development/index.md) 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](../publish/index.md). After the first release, you can use dev mode to preview further unpublished changes directly in Workshop.