Use Avonni to building Lightning Web Components visually

Create the component you imagined

Avonni has a visual components editor that can be used to build functional Lightning Web Components. With a rich set of UI resources available out of the box, Avonni makes it simple to kick-start your first component.

Native Standard Lightning Components

Open-Source Avonni Components

Customizable Templates

Ready-made templates help you create stunning Lightning Web Components

Build and design gorgeous looking and powerful Salesforce Lightning Web Components that impact your business immediately by finding inspiring templates for every use case you can imagine. Mix and match ready-made, customizable templates tailored for Lightning Web Components. Customize the content, save time and accelerate your workflow.

Collaborate and Present to Stakeholders

It's super easy to invite teammates and stakeholders to participate and give feedback around your component.

Annotate your work with notes, figures, comments and more

Post comments and create discussion threads

Invite anyone into your collaborative process

Export it to your Salesforce

Customize your component down to the smallest detail and export it directly to Salesforce with one click and without burdening the development team.

How to use Avonni to
build Lightning Web Components

Avonni is more than just a Component Builder — it’s also a complete solution to design, prototype, build and collaborate Lightning Web Components. From finding inspiration to keeping your team engaged until the end, Avonni keeps things streamlined and simple at every step.

1. Pick your project type

Select the Experience Components Project to create a functional Lightning Web Component. Experience Components projects are exclusively dedicated to Web Components.

2. Create your components

Create as many components as you wish with our easy-to-use drag and drop interface. Customize the layout, style and more. Make your components responsive and get a preview for both desktop and mobile.

3. Drag UI elements

Add visual elements with native Salesforce Lightning elements and Avonni Components. Need inspiration? Explore the hundreds of templates created for every use case you can imagine.

4. Adjust the code

Optional but sometimes useful, you can type or adjust your own code directly with our integrated code editor and get a visual translation instantly.

5. Run a brainstorming workshop

Validate early and often by allowing all your stakeholders to comment and review your components, leaving no room for misunderstandings.

6. Deploy on Salesforce

Deploy and update your components to Salesforce with the click of a button. Avonni automatically generates simple, clean, semantic code.

Ready to build your Lightning Web Components today?

Get the most out of your design by bringing your ideas to life.