How to split widget code into multiple files or use npm packages?

Hey y’all :wave:

Is there a way to split a widget’s code into multiple files? I know Figma won’t accept import statements in widget code, but I was wondering if I there was a special Typescript or vite/webpack/etc. configuration that managed to export a single, FigJam-friendly file.

My widget’s UI is quite complex, and it’s getting unwieldy to have the mini design system, re-usable components, state logic and iframe communication all in a single file. Plus, I was hoping this would open the door to using npm packages :blush:

Thank you for your help 'n attention o/

I hope the widget example and the information in the README will help you.

Thank you for the quick reply, @tank666!

The create-widget-app template is exactly what I was looking for! Perhaps you’d like to break its widget code (currently a single file) into multiple files to show it’s possible?

Also, getting a small TS issue when trying to use npm modules - although they work (:tada::tada::tada:), TS can’t resolve them, throwing:

"Cannot find module '@sanity/color'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?"

This is solvable by changing widget-src/tsconfig.json to include "moduleResolution": "node", which doesn’t interfere with the build itself :wink:

Anywho, thanks a ton for the help :pray: