{"id":12215,"date":"2024-03-25T15:55:41","date_gmt":"2024-03-25T12:55:41","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12215"},"modified":"2025-03-27T20:48:52","modified_gmt":"2025-03-27T17:48:52","slug":"dhtmlx-vault-5-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-vault-5-0\/","title":{"rendered":"DHTMLX Vault 5.0 with New Built-in Themes, UI Templates, and Live Integration Demos with Frameworks"},"content":{"rendered":"<p>DHTMLX Vault is a developer-friendly JavaScript tool designed to facilitate content management on a web page, namely uploading and managing various file types in the most convenient way. And here comes a major update for this helpful product to version 5.0.<\/p>\n<p>Following the example of Suite and Spreadsheet libraries, this release brings onboard numerous styling capabilities. First of all, there are four new built-in themes: Light, Dark, Light High Contrast, and Dark High Contrast. Moreover, these themes can be customized following your project requirements and support dynamic color change. Another significant novelty in v5.0 is the ability to customize the file uploader appearance with templates. On top of that, now you can also use three updated Vault integration demos with React, Angular, Vue, and the new one with Svelte.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX Vault v5.0<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for delivering a multifuncional JavaScript file uploader<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>In this blog post, we provide a detailed overview of this release.<\/p>\n<h5>New Customizable Themes<\/h5>\n<p>In version 5.0, we empowered the Vault component with four new built-in themes developed in accordance with international standards. The list of available options now includes <a href=\"https:\/\/docs.dhtmlx.com\/vault\/themes.html#lightthemedefault\" rel=\"noopener\" target=\"_blank\">Light<\/a> (default), <a href=\"https:\/\/docs.dhtmlx.com\/vault\/themes.html#darktheme\" rel=\"noopener\" target=\"_blank\">Dark<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/vault\/themes.html#lighthighcontrasttheme\" rel=\"noopener\" target=\"_blank\">Light High Contrast<\/a>, and <a href=\"https:\/\/docs.dhtmlx.com\/vault\/themes.html#darkhighcontrasttheme\" rel=\"noopener\" target=\"_blank\">Dark High Contrast<\/a> themes. With the introduction of high-contrast themes, our Vault component becomes accessible for end-users with visual disabilities.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/0ozw0ebo?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/0ozw0ebo?text=vault&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>When it comes to the practical application of new themes, you have two ways to do that. First, you can make use of the <strong>dhx.setTheme()<\/strong> method to set a certain theme in your JavaScript file uploader. This method takes the following string parameters:<\/p>\n<ul>\n<li><strong>theme<\/strong> (required) &#8211; names the theme (built-in or custom) that should be applied (default value \u2013 &#8220;light&#8221;),<\/li>\n<li><strong>container<\/strong> (optional) &#8211; allows using an HTMLElement, a container ID (or a Layout cell ID), or a <strong>document.documentElement<\/strong> (default value) as the container, where the chosen theme will be used.<\/li>\n<\/ul>\n<p>Alternatively, you can apply the desired theme with the <strong>data-dhx-theme<\/strong> attribute. Here you have two possible options:<\/p>\n<ul>\n<li>specify the <strong>data-dhx-theme<\/strong> attribute for a particular container:<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;!--<\/span> component container <span class=\"sy0\">--&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>div data<span class=\"sy0\">-<\/span>dhx<span class=\"sy0\">-<\/span>theme<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dark&quot;<\/span> style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;height: 100%&quot;<\/span> id<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;vault&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<ul>\n<li>specify the <strong>data-dhx-theme<\/strong> attribute for an HTML element:<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">document.<span class=\"me1\">documentElement<\/span>.<span class=\"me1\">setAttribute<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;data-dhx-theme&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;dark&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Check out this <a href=\"https:\/\/docs.dhtmlx.com\/vault\/themes.html#settingthemes\" rel=\"noopener\" target=\"_blank\">page<\/a> to learn more about setting Vault themes.<\/p>\n<p>Now, we want to draw your attention to some points that should be taken into account when configuring Vault themes.<\/p>\n<h6>Key Aspects of Configuring New Themes<\/h6>\n<p>If you take a look under the hood of the updated JavaScript file uploader component, you\u2019ll see that the CSS variables of the default theme come with variables of the color scheme.<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"coMULTI\">\/* color scheme *\/<\/span><br \/>\n<span class=\"re4\">--dhx-h-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">200<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"re4\">--dhx-s-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">98%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"re4\">--dhx-l-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">40%<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"coMULTI\">\/* other variables *\/<\/span><\/div><\/div>\n<p>These variables make it possible to change the color scheme of other Vault themes automatically. In practice, if you decide to change any value of the CSS variable from the color scheme in the root element of the Light theme, it will also be instantly calculated for three other built-in themes.<\/p>\n<p>Here is an example of how you can simultaneously override the primary colors for all Vault themes:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"sy0\">:<\/span><span class=\"kw5\">root<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re4\">--dhx-h-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re4\">--dhx-l-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">30%<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&lt;\/style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Other CSS variables based on the primary colors will be recalculated accordingly. For instance, that\u2019s how it works for the focused color:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">--<\/span>dhx<span class=\"sy0\">-<\/span>color<span class=\"sy0\">-<\/span>focused<span class=\"sy0\">:<\/span> hsl<span class=\"br0\">&#40;<\/span>calc<span class=\"br0\">&#40;<\/span><span class=\"kw1\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"sy0\">--<\/span>dhx<span class=\"sy0\">-<\/span>h<span class=\"sy0\">-<\/span>primary<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">+<\/span> <span class=\"nu0\">10<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"sy0\">--<\/span>dhx<span class=\"sy0\">-<\/span>s<span class=\"sy0\">-<\/span>primary<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"sy0\">--<\/span>dhx<span class=\"sy0\">-<\/span>l<span class=\"sy0\">-<\/span>primary<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Using this <a href=\"https:\/\/snippet.dhtmlx.com\/ly3ax0nw?text=vault&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">sample<\/a>, you can test how to dynamically change colors in Vault themes. If you want to make any changes in just one theme, you should resort to using the <strong>data-dhx-theme<\/strong> attribute. Find more information on the matter in this <a href=\"https:\/\/docs.dhtmlx.com\/vault\/base_themes_configuration.html\" rel=\"noopener\" target=\"_blank\">section<\/a> of our documentation.<\/p>\n<p>And that is not all, because with Vault 5.0 you are also able to create a custom theme with a unique color scheme. All you have to do is override the values of internal CSS variables and specify a name for your theme via the <strong>data-dhx-theme<\/strong> attribute.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/8qkj3kz1?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/8qkj3kz1?text=vault&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>More details on creating custom themes are provided on this <a href=\"https:\/\/docs.dhtmlx.com\/vault\/custom_theme.html\" rel=\"noopener\" target=\"_blank\">documentation page<\/a>.<\/p>\n<p>Using new Vault themes, you have a great opportunity to deliver a JavaScript file uploader with a consistent and visually appealing design and simplify the whole styling process.<\/p>\n<h5>Templates for Customizing the Appearance of Vault Elements<\/h5>\n<p>DHTMLX Vault is known for its flexible structure and numerous customization capabilities. In v5.0, we boosted the customization potential of this JavaScript library by introducing templates for modifying the Vault appearance. This novelty allows adjusting the look and feel of the Vault layout in the list and in the grid modes as well as the progress bar.<\/p>\n<p>To take advantage of templates in your JavaScript file uploader, you should employ a new <strong>templates<\/strong> configuration property. It is an object that may include optional template functions such as <strong>list<\/strong>, <strong>grid<\/strong>, and <strong>progressBar<\/strong> for modifying the corresponding Vault elements.<\/p>\n<p>In the example below, you can upload your files, and the progress bar will show you the total size of files that are currently being uploaded and the size of completely uploaded data. By default, the progress bar shows the total percentage of currently uploaded files. Moreover, there is also a possibility to show previews (if they are available) of uploaded images in the list mode.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/nasjg653?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/nasjg653?text=vault&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Apart from that, you can assign event handlers to HTML elements of a custom template of Vault items by using the <strong>eventHandlers<\/strong> configuration option.<\/p>\n<p>Programmatically, you can apply templates for Vault elements and event handlers in the following way:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> listTemplate<span class=\"br0\">&#40;<\/span>item<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;&lt;div class='class_name'&gt;&quot;<\/span> <span class=\"sy0\">+<\/span> item.<span class=\"me1\">name<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&lt;\/div&gt;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n&nbsp;<br \/>\n<span class=\"kw1\">const<\/span> vault <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Vault<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;vault_container&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; uploader<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; target<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/vault\/backend\/upload&quot;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; downloadURL<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; templates<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; list<span class=\"sy0\">:<\/span> listTemplate<br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; eventHandlers<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; onclick<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class_name<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;You clicked on &quot;<\/span> <span class=\"sy0\">+<\/span> event.<span class=\"me1\">target<\/span>.<span class=\"me1\">tagName<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ return false;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; onmouseover<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class_name<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"sy0\">,<\/span> id<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;Item ID: &quot;<\/span> <span class=\"sy0\">+<\/span> id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nvault.<span class=\"me1\">data<\/span>.<span class=\"me1\">load<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;https:\/\/snippet.dhtmlx.com\/codebase\/data\/vault\/01\/dataset.json&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Check out the documentation for detailed information on using <a href=\"https:\/\/docs.dhtmlx.com\/vault\/configuring.html#templatesforvaultitemsandprogressbar\" rel=\"noopener\" target=\"_blank\">templates<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/vault\/configuring.html#eventhandlersforthetemplate\" rel=\"noopener\" target=\"_blank\">event handlers<\/a> with Vault elements.<\/p>\n<h5>Live Integration Demos For React, Angular, Vue, and Svelte<\/h5>\n<p>All DHTMLX products are known to be compatible with popular front-end JavaScript frameworks and back-end technologies, and the Vault component is not an exception. In version 5.0, we stepped forward in this direction by delivering updated integrations with React, Vue, Angular, and a new integration option with the much-hyped Svelte framework. The full information on these live integration demos can be found in this <a href=\"https:\/\/docs.dhtmlx.com\/vault\/guides.html#integrations\" rel=\"noopener\" target=\"_blank\">section<\/a> of our documentation.<\/p>\n<p>Moreover, we also created GitHub repositories for Vault integration demos with <a href=\"https:\/\/github.com\/DHTMLX\/angular-vault-demo\" rel=\"noopener\" target=\"_blank\">Angular<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/vault\/react_integration.html\" rel=\"noopener\" target=\"_blank\">React<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/vault\/vuejs_integration.html\" rel=\"noopener\" target=\"_blank\">Vue<\/a>, and <a href=\"https:\/\/docs.dhtmlx.com\/vault\/svelte_integration.html\" rel=\"noopener\" target=\"_blank\">Svelte<\/a>.<\/p>\n<p>The &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/vault\/whats_new.html#version50\" rel=\"noopener\" target=\"_blank\">What\u2019s new<\/a>&#8221; section provides a quick revision of all the novelties included in Vault 5.0.<\/p>\n<p>Want to try DHTMLX Vault 5.0  in your web application? Download a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a> and get down to it. Our existing clients can get access to the latest Vault version via their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<p>And lastly, we encourage you to share your opinions on this release in the comments section below.<\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/whats_new.html#version50\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v5.0<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/index.html\" rel=\"noopener\" target=\"_blank\">DHTMLX Vault documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/0ozw0ebo?text=vault&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX Vault examples<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>DHTMLX Vault is a developer-friendly JavaScript tool designed to facilitate content management on a web page, namely uploading and managing various file types in the most convenient way. And &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":12220,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,16],"class_list":["post-12215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-dhtmlxvault"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=12215"}],"version-history":[{"count":8,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12215\/revisions"}],"predecessor-version":[{"id":13629,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12215\/revisions\/13629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/12220"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=12215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=12215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=12215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}