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
.png)
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.