Templr Demos
Sample components made with Templr Pro
On this page you can find several examples of Templr Pro in action. Each demo is an actual Data Studio report which with a working example of a component made with Templr, plus the actual HTML, CSS, and syntax used to create the component, i.e. the source code of the component.
You can see how each component is built, and recreate it by copy and pasting the HTML and CSS code into your own instance of Templr.
Basic Demos:
Click here to access the demo Data Studio report.
Included examples in this set are:
1. A simple Show/Hide Toggle
In this example, we've used CSS and some basic HTML to create an overlay box that can be toggled on or off by clicking on a small eye icon. This overlay box can be used to hide components underneath.
2. Google Fonts
In this example, we have re-created Siavak's Google Fonts community visualization that originally took several hours to develop, but this time in minutes, using Templr instead of the Google Data Studio SDK.
3. Conditional Content
Again, in this example we tried to re-create Siavak's most popular community component: Conditional Content and again, we managed to do so in minutes with only a few lines of HTML and CSS!
4. Tooltip/Popup
In this example, we see how it is to create fully customizable tooltips and pop-ups using Templr pro.
5. Custom Table
A table is the most basic chart that can be used for data visualization. In this example, we see how it is to create a fully custom table using Templr and how we can style it with CSS.
6. Responsive Card Grid
In this example, you'll learn to create a custom, responsive grid of cards with a few lines of HTML and CSS.
7. Transposed Table (By Thomas Langnau)
In this example, Thomas shows how to create a transposed table with templr.pro
HTML code and CSS styles are included in the demo:
8. Bar chart (By Thomas Langnau)
In this example, Thomas shows us how to create a simple bar chart with templr.pro, and pure HTML/CSS.
Click Here to access the demo Data Studio report.
Want to be featured here?
If you create an interesting component with Templr which you'd like to share with others, please contact us and we'll consider featuring it on this page with full credit to you/your company.