Question 1

How do I create a Übersicht widget that shows system CPU usage?

Accepted Answer

Use the 'command' property to run a shell command like 'top -l 1 | grep -E "^CPU"', then parse the output in 'updateState' and display it in 'render' with React components. Set 'refreshFrequency' for periodic updates.

Question 2

Übersicht vs BitBar: which is better for macOS widgets?

Accepted Answer

Übersicht uses React and JSX for richer, interactive UIs with live reloading, while BitBar focuses on simpler, script-based widgets. Choose Übersicht for complex, web-style widgets; BitBar for lightweight, text-based displays.

Question 3

Can I use npm packages in my Übersicht widgets?

Accepted Answer

Yes, you can import node modules by placing them in '/node_modules', '/lib', or '/src' directories. Übersicht supports ESM syntax for modular code, allowing use of external libraries.

Question 4

How to debug a Übersicht widget that's not updating?

Accepted Answer

Check the widget's 'command' output and 'updateState' logic for errors; use the app menu to 'Refresh all Widgets' if state shape changes. Ensure the widget file has a '.jsx' extension and is in the correct directory.

Question 5

Does Übersicht support dark mode or dynamic theming?

Accepted Answer

You can implement dark mode via CSS-in-JS with Emotion, using media queries or state to toggle styles. However, there's no built-in theming system; you'll need to code it manually in your widgets.

Question 6

How to fetch API data in Übersicht without CORS issues?

Accepted Answer

Use the built-in proxy server at http://127.0.0.1:41417 to make external HTTP requests, as shown in the README example. This bypasses CORS restrictions for fetching web data.

Übersicht

What is Übersicht?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions