widget-tutorial/src/subjects/widget-editor/readme.md

A comprehensive tutorial + recipes to get started with widgets in Qlik Sense.

---
title: The Widget Editor
sub-title: "Get to know the new Widget editor and how it works."
---

## The Widget Editor

The Widget editor is the main tool for a [Widget creator](../personas/#widget-creator) to design, create and develop a widget.

### Launch the Widget editor

Access the Widget editor through Dev Hub either by opening an existing Widget library or by just opening the tool.

### The structure

It seems to be unnecessary to describe a UI, but it is on the other hand important to understand some basic concepts of the Widget editor.

First of all the UI of the Widget editor is separated into different areas:

1) Asset panel
2) Editor
3) Immediate preview 
4) Property panel / Property panel builder

### Insert dialogs

Use the insert dialog to easily insert

- Code snippets
- Icons
- Properties

**Code snippets**

![](images/insert-snippets.png)

**Icons**

![](images/insert-icons.png)


**Properties**

![](images/insert-properties.png)



### Little convenience helpers

The Widget editor includes some nice little helpers to make the work with Widget more enjoyable:

**Adapt coding areas**

![](images/resizable-code-areas.gif)

**Distraction free mode & resizable preview**

Focus on what you are working on, all-together, only Html, only CSS, etc.
![](images/distraction-free-mode.gif)

**Resizable font size**

Adjust the font size of the code areas. Especially useful if you present Widget on stage or in a presentation.

![](images/resize-font.png)