Real-Time Liquid Previews

One of the best possible ways to help people write Liquid correctly without errors is to give them a way to test. Once you've written Liquid, how do you know it is working without seeing the output the way a user would see it?

This can be a hard problem to solve depending on how you're using Liquid in your application. I've seen some applications that require you to go through a whole testing process in order to see your Liquid output a single time. At a previous job, once you wrote your Liquid, it could take up to 5 minutes to see the result.

This is one way that Dropkiq can help your organization out of the box for free. You can add the demo experience "OUTPUT" to your application and users can instantly see how their Liquid will be rendered.

‍

‍

Simply right click on the page, click on "Inspect", and go the the "Console" tab to see this feature in action on the demo page.

‍

‍

To see how this works, right click on the page, and go to "View Page Source". You simply pass in an option called "onRender" to your DropkiqUI instance, and the function is called whenever the Liquid is rendered. With this, you can use the rendered Liquid to show your preview.

var options = {  
 onRender: function(renderedDocument){    
  console.log("From onRender:", renderedDocument);  
 }
}

new window.DropkiqUI(document.getElementById('text-area-example'), schema, context, scope, gon.licenseKey, options);

‍

Can you imagine trying to write code without getting to easily see the result? For many users today, writing Liquid is like programming with blinders on! Not an easy task. Use this feature to instantly make writing Liquid exponentially easier for yourself and your users.

‍