Skip to content


Repository files navigation

Alquist Editor

Alquist Editor provides a quick way to see the structure of dialogues created for Alquist dialogue manager and edit their code at the same time.

It consists of a javascript client that displays graph of dialogue's states and contains a simple user interface and python server which generates graph nodes and edges from yaml codes and provides basic file management.

Editor can be accessed on /editor/ url, for example


Python 3 is required to run the Alquist Editor. You can install all the needed requirements using pip command in project's root directory.

pip install -r requirements.txt

Should you have any problems with installation you can also check out installation instructions here:


To run Alquist editor use the same command you would use to run Alquist dialogue manager.

py -3

How to use

Main page

On the main page of the editor you can select an existing project or create a new one. New project can either be created empty or from existing files uploaded in a zip folder.

Editor page

File manager in the left pane contains flows and states folders by default. Flows folder is used for storing YAML files which define the structure of a bot. States folder is used for storing any custom python states that your project contains.

Nodes of the graph structure represent various states of the dialogue and oriented edges represent transitions between these states. Graph display divides states into groups according to the YAML files where they are defined. Clicking on a node will automatically open the appropriate file and scroll to the selected state. It also uses different colors to distinguish between different states:

  • yellow for initial state
  • red for unreachable states
  • green for targets of intent transitions
  • white for other states

Code editor highlighting supports python and yaml syntax. It also supports autoindent, line numbers etc.

Editor structure

Here is a list of the main files which are a part of the editor. The rest of the files in this project belong to the dialogue manager the editor is based on.

  • - contains methods for graph creation from dictionary of all states and related operations
  • - flask server which accepts requests from javascript client, manages files etc.
  • IO/index.html - index page of editor, project selection and creation
  • IO/editor.html - main part of client, contains file manager, graph display and code editor
  • IO/static-files - contains all static files such as stylesheetes, themes, javascript libraries etc.

Used javascript libraries

Viz.js - used for displaying graph of dialogue states


SVG Pan Zoom - enables easy panning and zooming of graph

Split.js - enables splitting web page into several panes

Tab Override - enables use of tab key in text area (default size of 2 spaces)

CodeMirror - enables syntax highlighting, autoindent, line numbers...

jsTree - jquery plugin which provides interactive trees (displays interactive file structure)

jsTree Proton theme - theme for jsTree plugin

Bootstrap - javascript framework

Bootbox - provides programmatic dialogue boxes for Bootstrap


Alquist Editor is web editor for Alquist dialogue manager






No releases published


No packages published