{"id":9194,"date":"2021-09-09T10:58:26","date_gmt":"2021-09-09T07:58:26","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9194"},"modified":"2024-11-01T13:40:56","modified_gmt":"2024-11-01T10:40:56","slug":"whats-new-dhtmlx-code-snippet-tool","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/whats-new-dhtmlx-code-snippet-tool\/","title":{"rendered":"What’s New in DHTMLX Code Snippet Tool"},"content":{"rendered":"

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<\/a>. 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.<\/p>\n

6 available modes<\/h5>\n
Basic mode<\/h6>\n

The DHTMLX snippet tool<\/a> 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.<\/p>\n

\"SnippetCheck the sample ><\/a><\/p>\n

All new viewing modes are enabled in a similar way by adding corresponding endings to the default URL of the snippet tool.<\/p>\n

Wide mode<\/h6>\n

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<\/em>.<\/p>\n

\"snippetCheck the sample ><\/a><\/p>\n

Mobile mode<\/h6>\n

With the mobile mode, you can see how snippets look like on mobile devices. Add ?mode=mobile<\/em> to the URL and you got it.<\/p>\n

\"snippetCheck the sample ><\/a><\/p>\n

JS mode<\/h6>\n

When it is necessary to focus on the JS part of your sample, enter ?mode=js<\/em> in the URL and you\u2019ll see only JavaScript code.<\/p>\n

\"snippetCheck the sample ><\/a><\/p>\n

HTML mode<\/h6>\n

Want to get a closer look at the structure of a web page containing your sample? Enable the HTML mode by adding ?mode=html<\/em>.<\/p>\n

\"codeCheck the sample ><\/a><\/p>\n

Result mode<\/h6>\n

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<\/em> ending, it allows you to show the preview window across the whole page and to switch between all modes via tabs.<\/p>\n

\"codeCheck the sample ><\/a><\/p>\n

Navigation improvement and a new shortcut key<\/h5>\n

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.<\/p>\n

DHTMLX components available in the code snippet tool<\/h5>\n

Besides DHTMLX Suite, so far the code snippet tool provides examples of the following components:<\/p>\n