Configure custom code (CSS and JavaScript)

While Baserow offers a wide range of built-in no-code tools, you can use the Custom CSS/JS settings to inject standard web code into your application. This feature allows developers and designers to override default styles, add advanced interactivity, or connect external services like analytics and chat widgets.

This guide covers how to extend your application’s functionality with custom styling, logic, and third-party integrations.

Custom CSS and JavaScript in Baserow Application Builder

Overview

This feature is designed for users who need to go beyond the standard interface. It allows you to inject code into the frontend of your application.

  • CSS: Used for visual customization (fonts, colors, hiding elements).
  • JavaScript: Used for logic, DOM manipulation, and interactivity.
  • External resources: Used to load libraries from a CDN (e.g., Google Fonts, jQuery, Analytics scripts).

For security and stability, custom code is not executed inside the Application Builder editor. You must view your app in Preview mode or the Published live version to see your code take effect.

How to add custom code

To inject custom scripts or styles into your application:

  1. Open your project in the Application Builder.
  2. Click on Application settings in the sidebar/menu.
  3. Select the Custom CSS/JS tab.
  4. Paste your code into the appropriate section (see table below).
  5. Publish or Preview your application to test the changes.

Configuration options

There are three distinct areas where you can add code, depending on your goal:

Section Language Purpose Example Use Case
CSS CSS Custom Styling Changing font families, adjusting padding, or hiding specific UI elements.
JavaScript JS Interactivity Creating custom pop-ups, complex form validation, or manipulating the DOM.
External resources URLs Third-Party Tools Loading Google Analytics, Intercom chat widgets, or payment processors.

Common use cases

Adding custom code allows for deep integrations that are not possible with native elements alone.

  • Analytics and tracking: Embed scripts for Google Analytics, plausible.io, or Meta Pixel to track user behavior.
  • Customer support: Inject chat bubbles from providers like Intercom, Zendesk, or HubSpot.
  • Branding: Import custom web fonts or enforce strict brand color guidelines that override the default theme.
  • UI components: Build sliders, modals, or tabs that require custom logic.

Frequently asked questions (FAQ)

Why isn’t my code working in the editor?

Custom code is disabled in the editor to prevent broken scripts from locking you out of the configuration interface. You must click Preview or access the Published URL to execute the code.

Can I break my application with custom code?

Yes. Since you are injecting raw code, incorrect CSS can hide navigation elements, and buggy JavaScript can stop the app from loading. Always test in Preview mode before publishing to your live users.

Can I load external libraries?

Yes. Use the External resources section to load stylesheets or JavaScript libraries (like jQuery or Bootstrap) from a CDN URL.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.