Developer Mode with fake results when styling results

httpjames

When developing custom CSS for Kagi, it takes a lot of reloading to check the result of your styles. As a result, it incurs quite the cost.

There should be a "Developer Mode" which loads a page with fake results to test custom CSS styles on the fly without actually incurring search costs. It could include all the element types, such as AI results, wikipedia widget, shopping widgets, etc. so developers can test effectively.

z64

A "test page" as you describe could be very helpful - I think even our devs would enjoy that 🙂

I think its worth mentioning for anyone reading that is new to CSS editing, that browsers have very robust tools for live-editing CSS.

I walk through a number of techniques in a video here:

(it shows off an older iteration of Kagi design, but the techniques all still apply)

While there's few queries that show off every element, I would imagine for many edits you can get a large portion of the work done using live editing, without needing to reload at all. Then simply drop in your edited CSS from the Sources tab - I show that off at this timestamp.

Vlad

Worth noting that the video above is also mentioned in our documentation for the CSS feature.

https://help.kagi.com/kagi/features/custom-css.html

also typing "!help css" in Kagi will launch you straight there (!help bang links to our documentation)

Recast

I agree. Different widgets need different styling and it's hard to manually find searches that trigger all the different widgets. A test page with all widgets on the same page would be pretty convenient and would encourage more "production-grade" themes.