6 available modes
The DHTMLX snippet tool is notable for its intuitive UI. The basic mode is a default view of the snippet. It includes three windows: two windows for JS and HTML code on the left, and a snippet preview window on the right. That’s how the DHTMLX-based spreadsheet looks like in basic mode.
All new viewing modes are enabled in a similar way by adding corresponding endings to the default URL of the snippet tool.
If you want to see just the result of code manipulations in DHTMLX components, the wide mode is exactly what you need. It displays the preview window over the entire screen of the snippet tool. Just complement https://snippet.dhtmlx.com/iazmc27w with ?mode=wide.
With the mobile mode, you can see how snippets look like on mobile devices. Add ?mode=mobile to the URL and you got it.
Want to get a closer look at the structure of a web page containing your sample? Enable the HTML mode by adding ?mode=html.
When your snippet is fully completed, it is nice to review the result of your work via the result mode. Actuated with the ?mode=result ending, it allows you to show the preview window across the whole page and to switch between all modes via tabs.
Navigation improvement and a new shortcut key
Apart from new view modes, we improved the snippet tool navigation by moving the toolbar from the right side to a more common place on the left side. It has also become much easier to save your work progress with snippets via a new keyboard shortcut – CTRL (CMD) + S.
DHTMLX components available in the code snippet tool
Besides DHTMLX Suite, so far the code snippet tool provides examples of the following components:
Summarizing the above, we can say that the DHTMLX code snippet tool has become more functional and user-friendly. Following the instructions provided in this article, you can test all new modes implemented in the snippet tool.