The document outlines a webinar led by Jason Beres on using the Indigo.Design App Builder to quickly design apps and produce production-ready code using a WYSIWYG drag-and-drop interface. It addresses common challenges developers face with web design and highlights features such as real-time code preview, source code management, and compatibility with popular design tools. A live demo was presented, and future sessions are planned to explore deeper integration with platforms like GitHub.

1. From Design to Code in
Seconds with App Builder

2. Today's Host
Jason Beres​
Senior VP, Developer Tools​
jasonb@Infragistics.com

3. Today's Agenda
1. Quickly Design Apps with WYSIWIG Drag & Drop
2. Preview Designs Instantly in Your Browser
3. Produce Production Ready Code
4. Live Demo
5. Wrap Up
House Keeping
• Recording and slides will be available
after the webinar. We’ll send a follow-
up email
• Please ask questions in the Questions
window
Infragistics.com/indigo-design

4. Problems Solved with App Builder
Infragistics.com/indigo-design
• (Most) developers do not like CSS, or web
layout, or anything to do with Web
design
• This creates a ton of wasted time and no
matter what, the result is not good
• Have you heard “You’ll need to find
someone else to make this look good”?
• We solve that with a Web-based
WYSIWYG IDE that ANY developer can
learn

5. WYSIWIG Drag & Drop

6. 100% Cloud-Based WYSIWYG
Infragistics.com/indigo-design
• The fastest way to design complete business
apps
• Our toolbox and rich property editor give
you full control over how your controls look
and behave
• Compatible with popular design tools like
Sketch, no downloads or third-party
dependencies
• It’s like a VB6 / ASP.NET Web Forms /
Windows Forms designer but for the Web

7. Preview Your Code

8. Instant Real-Time Preview
Infragistics.com/indigo-design
• Preview your code instantly in just a
single click
• Experience the look and feel of your app
without having to compile or download
• Switch to Code View and get the instant
preview of the production-ready HTML,
TypeScript, and CSS

9. Starts with UI Kits (Sometimes)

12. Production Ready Code

13. 3 Easy Ways to Get Your Source Code
Infragistics.com/indigo-design
Copy
• Use Right-Click / CTR+C to copy from the Indigo.Design code viewer
to the clipboard
Download Zip
• Download a Zip file with all source files. Simply run npm install /
ng serve on the client and see your new app run live in the browser.
Sync to GitHub
• Sync your Indigo.Design project directly to GitHub, do pull requests
from Indigo.Design and merge changes on GitHub.
1
2
3

14. Demo

15. Wrap-Up

16. What's Next?
Infragistics.com/indigo-design
• Indigo.Design App Builder is providing
you the fastest way to go from Design
to Code
• Compatibility with Figma and Adobe
XD coming by end of year, along with
React & Blazor for UI Framework
Support
• Our next session will go deeper into
Indigo.Design App Builder and GitHub
integration!

17. Try Indigo.Design App Builder
Today
infragistics.com/products/indigo-design/app-builder
Contact us for a Personalized Demo: sales@infragistics.com

18. Email With Questions!
Jason Beres​
Senior VP, Developer Tools​
jasonb@Infragistics.com

19. Thank You!