Howdz Dashboard: a Vue 3 browser start page you arrange by dragging components

Layout is either document flow or fixed positioning, and you can switch

The project is described as a fully customisable browser start page built on Vue 3, TypeScript and Vite, and the first design decision in the feature list is the one that shapes everything else. There are two layout modes: a responsive layout based on document flow, and a Fixed mode where you can place a component at any position. That is a real fork in the road rather than a cosmetic option, because in flow mode components stack and resize according to the document, while in fixed mode they float. The layout is also responsive, and in edit mode you drag components to change their size and position. A component is added or removed freely, and both its style and its behaviour are configurable, which is the difference between a widget collection and a dashboard builder.

Components cover the usual start-page needs and then some

The component list is the substance of the project. The Empty component is a placeholder with some simple configuration and custom text. Clock is a simple clock, and Day is described as an upgraded version of it with more powerful date format definition using Dayjs formatter placeholders, with a note that if the smallest unit is seconds you should change the component refresh rate to 1s. Verse shows a random classical Chinese poem with a configurable timed refresh, using the jinrishici.com API. Search supports adding custom search engines, switching between them with the Tab key, and keyword suggestions. Collection is a keyboard bookmark where pressing a key jumps to a site and the site icon is fetched automatically.

Several components call out to third-party services

Some components are local and some are not, and the difference matters for privacy and reliability. The Iframe component embeds an external site, and the README notes that current browsers only allow same-protocol iframes, so an https page can only embed https content. The Verse component calls the jinrishici.com API. The Weather component can determine the city automatically by IP or accept manual input, with reading GPS mentioned as a possible later addition. TodoList supports multiple dates, with a date picker expanding from the top. CountDown sets countdown events in days, hours or minutes. The Editor component is a markdown editor built on Milkdown, loading plugins on demand, and the list is specific: Tooltip for a formatting toolbar above selected text, Slash for a command palette on typing a forward slash, Clipboard for copying and pasting markdown, History for undo and redo with Ctrl+Z and Ctrl+Y, and Prism for code block highlighting.

The list components are aggregators over public APIs

A second group of components is made of hot lists, each of which wraps an external data source and supports configurable auto refresh. DailyHot aggregates popular rankings, and its API service is based on the DailyHotApi project. JuejinList shows the latest popular list from Juejin, WeiboList shows the latest Weibo trending search list, GithubTrending shows that day's GitHub trending list, and ZhihuList shows the current Zhihu hot list. MovieLine shows a random classic film quote with the film poster as a background, and its display is configurable. The Bookmark component is a bookmark manager where the current folder supports one level of directory, where entering a URL on add fetches the site icon and title automatically, where icon style, size and background colour are customisable and the icon can be cached as Base64, and where bookmark HTML exported from Chromium-based browsers can be imported.

Export by key or by JSON file is what makes the dashboard portable

The data story is the part that separates this from a page of static widgets. The README states that data can be exported using a key or a JSON file to implement data synchronisation. Combined with the preview mode, which the README describes as a data isolation mode intended for sharing, that gives you a way to hand someone a configuration without handing them your own data. The multi-tab mode allows adding and switching between several isolated pages, so separate contexts such as work and personal can live in one dashboard without sharing state. Language switching is supported between Simplified Chinese and English. Persistence in the browser side is handled by localforage in the dependency list, with pinia and pinia-plugin-persistedstate for state management, and js-md5 and pako in the dependencies suggest keys and compressed payloads for the export and sync path.

Themes and wallpapers are configuration, not code

The visual layer is also configurable. Multiple themes are preset and can be chosen on first entry. The wallpaper options include local wallpapers and random wallpapers, and the random mode supports a personal wallpaper library you can favourite into. A dynamic wallpaper background can be configured using an official video or a network video path you add yourself. So the appearance of the dashboard is a matter of picking options rather than writing CSS, which is the intended trade for a non-developer audience, and the reason the project pairs an editor mode with a preview mode, so you can see the effect of a change without leaving the configuration state.

It ships as a web app and as extensions for three browsers

The distribution is the widest part of the project. There is a hosted web version at howdz.xyz, and the README links a Chrome extension from the Chrome Web Store, an Edge extension from the Microsoft Edge add-ons site, and a Firefox add-on. The repository root shows how that is built. The build script is a Vite build with the environment variable VITE_APP_BUILD_MODE set to cdn, and a separate build:crx script sets that same variable to crx, followed by a move:crx script that packages the extension. There is also an upload script that pushes the built assets to a CDN, and dist/ is checked in. Linting uses oxlint, the commit message hook runs commitlint with a conventional changelog preset, and a pre-commit hook runs the linter, with husky wiring both. The documentation is at doc.howdz.xyz with Chinese and English versions, and there is a changelog and FAQ linked from the README.

The npm scripts in the package.json cover the whole loop from local development to a published extension.

"dev": "vite",
"build": "cross-env VITE_APP_BUILD_MODE=cdn vite build",
"upload": "node scripts/upload-cdn.cjs",
"serve": "vite preview",
"build:crx": "cross-env VITE_APP_BUILD_MODE=crx vite build",
"move:crx": "node scripts/build-crx.cjs",
"lint": "oxlint src"

The dev script runs the Vite dev server, serve previews a production build, and the crx pair produces and packages the browser extension, with the upload script publishing the CDN build.

Editorial conclusion

Howdz Dashboard fits a person who wants a personal browser start page assembled from pieces they can rearrange, resize and restyle, with a search bar, bookmarks, a to-do list, a markdown editor and hot lists as ready components and a drag-and-drop edit mode rather than a fixed template. It is a poor fit for a shared or team landing page, because the configuration is per-browser local data with a preview mode for isolation rather than a server-backed account, and a poor fit for a user who wants a fixed set of widgets. Verify first whether the component you want already exists before writing your own, and note the version spread, since the tagged releases stop at v1.1.5 from 2021-12-31 while the package.json declares 1.9.1.

Frequently asked questions

Official sources

1. leon-kfd/Dashboard on GitHub
2. License: MIT
3. Project website
4. README
5. Releases