Add a Function Library Extension in Studio Two

A function library bundles reusable, stateless functions that a Wix user connects to a slot in the editor, like an ERC prop or event handler. It has no state and no UI of its own.

Follow the instructions below to:

1. Add a function library to your site project.
2. Customize the manifest and implementation.
3. Check the function library.
4. Publish your site with the function library.

Step 1 | Add a function library

To add a function library:

1. In the Studio Two editor, open the Code tab.

2. In the VS Code sidebar, open the Wix Extension Builder.

   

3. Under Create an Extension, choose Site, then Function Library.

4. Fill in the form:

   • Extension name: The display name for your function library in the editor.
   • Extension folder: Optional. Lowercase alphanumeric and hyphens only. When you omit it, the folder name is derived from the extension name.

5. Click Generate.

You can find the new files under src/extensions/site/function-libraries/<extension-folder>/. The library is added to your project's extensions.ts automatically, so it's registered as soon as it's created:

• <extension-folder>.extension.ts: The function library manifest. Declares each function's name, parameters, and return type.
• <extension-folder>.ts: The implementation file. Exports one function per entry in the manifest, matching it by name.

The boilerplate is a working formatPrice function that you replace with your own functions.

Step 2 | Customize your function library

You can edit the generated files to match the logic you need. When you're happy with the library, move on to the next step.

For the full workflow, from declaring functions in the manifest to implementing them, see Build a Function Library in Studio Two.

Step 3 | Check the function library

To check the function library:

1. Switch to the Design tab.
2. Select an element with a property whose data type matches one of your functions' return types, open its Settings panel, and click the connect icon next to that property.
3. In the Connect to Data panel, choose your function library under Source. It's listed by its manifest type, for example companionApp.docsDemoFuncLib, not its display name.
4. Choose the function you want from Field. The Field dropdown only offers functions whose return type matches the property, and Studio Two auto-selects one if it's the only match.
5. For each of the function's parameters, enter a value directly, or click the connect icon next to a parameter to bind it to another data source.
6. Click Apply.

The bound element then shows the function's return value, computed from the parameters you set.

Step 4 | Publish your site

When you're ready, click Publish in the Studio Two editor. Your function library ships with the published site.

See also

• About Function Libraries
• Build a Function Library in Studio Two
• Function Library Extension Files and Code
• About Studio Two Extensions
• Component Integration Patterns