Webflow Designer Extension Starter - Svelte + Melt UI + TypeScript + Tailwind + Vite

This project serves as a starter template for developing Webflow Designer Extensions using a tech stack of Svelte, Melt UI, TypeScript, Tailwind CSS, and Vite.

Features

• Svelte for building reactive UI components.
• Melt UI for additional UI components and utilities.
• TypeScript for static typing.
• Tailwind CSS for utility-first styling.
• Vite for fast development and bundling.
• Example function for changing the window size via the Webflow API.

Getting Started

1. Clone the repository:

   git clone https://github.com/pi-ron/wfdex-svelte-starter.git

2. Navigate to the project directory:

   cd wfdex-svelte-starter

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Development Modes

• Designer Mode (No live reload):

  npm run dev

• Vite Mode (With live reload, won't work in Webflow Designer):

  npm run devite

Testing

You test your app by uploading the resulting bundle.zip to your workspace and installing it on a site.

npm run bundle

or

webflow extension bundle

Project Structure

• src/: Source code directory.
  • components/: Svelte components.
  • routes/: Svelte components representing different routes.
  • stores/: Svelte stores for managing state.
  • types/: TypeScript type definitions.
  • main.ts: Entry point file.
• public/: Static assets.
• README.md: Project documentation.
• tsconfig.json: TypeScript configuration file.

Contributing

Feel free to contribute to this project by creating issues, pull requests, or contacting the maintainer.

License

This project is open-source and available under the MIT License.