Getting Started with Jutro

Jutro is Guidewire’s design system and UI framework that empowers designers and developers in P&C insurance to build usable, engaging, and configurable insurance applications. This blog post covers these topics:

The Jutro documentation site (login required) gives you the foundational knowledge to develop and design with Jutro. This includes resources such as:

  • Comprehensive developer docs
  • Sample app code
  • Component guidelines
  • Business patterns for recurring user needs
  • Blueprints that showcase design possibilities

Jutro Design System

What’s in the Jutro Box?

Component library: Jutro offers developers a library of prebuilt components that speed up the design process while also promoting consistency across consumer applications. Developers use these components to accelerate the building of their applications, leveraging component level capabilities such as analytics, localization, theming, and accessibility.

Codeless UI composition: Each of the UI components is easily configured via presentation metadata such as labels or pages, thus building a metadata-driven application that can be easily modified without writing code.

Design guidelines and patterns: We offer a set of UI assets designed around a consistent paradigm. These assets include predesigned, highly repeatable UI components, standardized application layouts, and themes.

By using Jutro to build digital products for the insurance industry, designers, developers, and product owners can streamline the effort it takes to create compelling products.

What's In Jutro

Get Started with React

If you are new to front-end development, or if your experience is limited, familiarizing yourself with React is a good place to start before jumping into a Jutro project.

Jutro builds on React concepts like functional components, providers/context, hooks, data binding, routing, i18n, and composition (vs. inheritance). Knowing these React basics will help you get the most out of Jutro.

Learn how to get started with React here.


Jutro Developer Basics

Here are the basics you need to know to start developing with Jutro:

  • The Jutro Design System and web application framework uses React for implementation.
  • Your Jutro app wraps your code in all the helpers that are necessary to develop with Jutro.
  • Your app structure is based on a Jutro floorplan.
  • The layout of each page is achieved using one of five content layout options.
  • Use the Jutro internationalization mechanism even if you don’t have to translate your app (yet!).

Learn Jutro by Doing

Missions Accomplished

Our guided Learning Missions are designed to introduce you to the basics of developing with Jutro. Presented as short, digestible coding instructions, each mission helps you explore specific features of Jutro using a sandbox app.

Check out the Jutro Developer Learning Missions here (login to view).

After completing the Learning Missions, you should be able to:

  • Use Jutro presentation metadata
  • Configure Jutro floorplans
  • Generate new pages using Jutro CLI
  • Leverage Jutro components and business patterns
  • Integrate the Claim API
  • Apply Jutro theming
  • Integrate third-party APIs

Jutro Sandbox App: Play and Learn

The Jutro sandbox app is a react-app wrapper that surrounds Jutro. It enables you to start developing with all the Jutro features that are available out of the box.

Download the Jutro sandbox app on the Jutro documentation site here (login to access).

How Do Designers Work with Jutro?

Jutro user experience (UX) designers leverage the Jutro Design System library on Figma to design performant, accessible, and compelling digital user experiences. The Jutro documentation site provides designers with all the resources they need to create UIs according to industry best practices and in line with the Jutro design principles.

Check out the Getting started page for designers on the Jutro documentation site.

Jutro Design System Tiles

Jutro Training Courses and Certifications

You can learn more about Jutro and how it helps you create compelling digital user experiences on the Guidewire Education site (login required).

Get updates for Guidewire developers delivered right to your inbox.
About the Author
Nada El Maliki

Nada El Maliki

Instructional Designer

Uniting the pillars of pedagogy with the multimedia technology to create powerful learning experiences

Get updates for Guidewire developers delivered right to your inbox.

Featured Resources

Get started with the Guidewire Payments API with this QuickStart guide written by our Engineers for Guidewire developers.
How to reuse complex fragments across metadata files with the codeless component feature of Guidewire Jutro.

Featured Blogs

Welcome to the new Guidewire developer blog. Start here to learn about new skills, features, and tools to help you master your projects.
Sr. Director of Product Management, Chris Vavra unveils new and future capabilities that make Guidewire integration projects simpler, faster, and easier.

Featured Guides

Use Case
Want to build beautiful and engaging digital experiences for Guidewire? This page has everything you need to get started.