Custom code demos
Categories
Baserow
Level
Beginner

Improving the user experience in your Baserow applications doesn’t always require building complex features from scratch. With just a little bit of custom code, you can take the existing no-code functionality much further and create apps that look polished, feel more interactive, and are easier to use. That’s exactly the purpose of this template: to showcase ten practical hacks that you can easily add to your own Baserow projects.

Each example focuses on a small but impactful enhancement. From styling improvements like importing Google Fonts and adjusting column widths, to functional upgrades like making containers clickable or adding a sticky button, these hacks demonstrate how little tweaks can make a big difference. You’ll also find interactive ideas, such as applying hover effects, expanding and collapsing sections, or creating scrollable lists. On top of that, there are visual insights with custom charts powered by Chart.js, including charts that dynamically update when filters are applied.

Whether you want to improve readability, enhance navigation, or make your data more visually engaging, these ten hacks give you a starting point. Explore them, copy what you need, and adapt them to your own apps—because great user experience comes from thoughtful details.

The examples

  1. Using Google fonts: importing a google font and apply it to certain sections on the page
  2. Custom column width: overwriting the 50/50 division when working with a column element
  3. Fixed height repeat: create a scroll bar for the Repeat element container in case of long lists
  4. Clickable container: make an entire container clickable instead of just the Link element
  5. Hover effect: add a hover effect to an image in a link
  6. Draw chart: draw a polar chart with chartjs by scraping data from a Table element
  7. Draw chart with filters: doing the same, but updating the chart when filtering the table
  8. Conditional formatting: add a background color to a table depending a the value of a field
  9. Sticky button: add a button in the lower right corner (not really visible in the video) and to a smooth scroll when clicking it
  10. Expand and collapse: hiding / showing element when clicking the header