If you have ever had to write a Custom Script just to change the background color of a field, or struggled with injecting CSS via frappe.call only to deal with the annoying “Flash of Unstyled Content” (FOUC), I built something for you.
I’m excited to share Form Styler, a free, open-source app that allows you to visually change form layouts and styles across your ERPNext instance completely without code.
What it does
Form Styler adds a visual configuration page where you can:
-
Change the Width and Height of any field.
-
Customize Label Colors, Text Colors, and Background Colors.
-
Target specific fields or use wildcards (
*) to instantly style entire DocTypes. -
Column Break and Section Break can also be customized.
Built for Performance
I wanted to make sure this app doesn’t slow down production instances, so a lot of engineering went into the backend:
-
Zero FOUC: CSS rules are injected synchronously via
extend_bootinfo. Styles are loaded into the browser’s memory the moment the page boots, meaning forms render instantly with your custom designs—no visual flickering or 100ms API delays. -
Redis Caching: Heavy backend loops (
frappe.get_meta) are wrapped in 24-hour Redis caches. Your Python workers won’t break a sweat when users refresh the page. -
Minified Payloads: By converting heavy Frappe dictionary lists into standard tuples (Arrays), the JSON payload size sent to the frontend is reduced by roughly 40%, keeping network times blazing fast.
Try it out!
You can grab the app and view the source code here: https://github.com/raisulislam0/form_styler.git
Installation:
cd ~/frappe-bench
bench get-app https://github.com/raisulislam0/form_styler.git
bench --site YOUR_SITE install-app form_styler
bench --site YOUR_SITE migrate
bench --site YOUR_SITE clear-cache