What’s New in DHTMLX Code Snippet Tool

Since its release in July 2020, the code snippet tool has become a great helper to programmers who use DHTMLX JavaScript UI libraries. If you are not familiar with it yet, you can check out the release article. This handy instrument enables developers to view the JS and HTML code of DHTMLX samples, make modifications, and preview the result. Modified snippets can be easily saved and shared with colleagues for more effective collaboration as well as with our technical support team when the need arises. And now, the DHTMLX development team made the snippet tool even more convenient by introducing several helpful view modes. In this article, we will take a look at the basic mode of the snippet tool and find out how it can be switched into new modes.

6 available modes
Basic mode

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.

Snippet tool - basic modeCheck the sample >

All new viewing modes are enabled in a similar way by adding corresponding endings to the default URL of the snippet tool.

Wide mode

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.

snippet tool - wide modeCheck the sample >

Mobile mode

With the mobile mode, you can see how snippets look like on mobile devices. Add ?mode=mobile to the URL and you got it.

snippet tool - mobile modeCheck the sample >

JS mode

When it is necessary to focus on the JS part of your sample, enter ?mode=js in the URL and you’ll see only JavaScript code.

snippet tool - js modeCheck the sample >

HTML mode

Want to get a closer look at the structure of a web page containing your sample? Enable the HTML mode by adding ?mode=html.

code snippet tool - html modeCheck the sample >

Result mode

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.

code snippet tool - result modeCheck the sample >

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:

Final words

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.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components