r/vuejs

Hi everyone! After not finding a Vue 3 video player that covered everything I needed, I built one.

Vue Player handles the things you'd otherwise wire up yourself:

Streaming — pass an .m3u8 URL and HLS kicks in automatically with quality switching. hls.js is optional and loaded on demand, so if you're not using HLS there's zero overhead.

Timeline — chapter markers with hover tooltips, thumbnail previews on scrub. The kind of stuff you see on YouTube but rarely in a library.

Subtitles — WebVTT tracks with a built-in multi-language menu, no extra setup.

Flexibility — a usePlayer composable for fully custom UIs, a controls slot if you just want to swap the controls, and CSS variables for theming down to every detail. Also ships an official Nuxt module with auto-imports.

Everything is fully typed.

npm install @vue-player/vue

# optional, for HLS streaming
npm install hls.js

<template>
  <VideoPlayer src="/video.mp4" />
</template>

📖 Docs · GitHub

I like PicoCSS, and I like Vue. Maybe you like those things too?

Pear is a small Vue 3 component library built on top of PicoCSS. The basic idea is: keep the nice semantic HTML and low-clutter styling from Pico, then add the Vue bits like crunchy granola into tasty yogurt.

It has typed Vue components for things like buttons, inputs, selects, modals, accordions, dropdowns, and layout primitives. It tries to stay pretty thin: components still render native elements like <button>, <input>, and <dialog>, and PicoCSS does most of the visual heavy lifting.

Pear is mostly something I wanted to exist for myself, but I tried to make it easy for other people to use too. Maybe people like you.

Docs/site: pear.ontic.cloud

Repo: onticcloud/pear

Feedback, issues, "what is this weird Pinia ripoff looking thing doing in my feed," all welcome.

Hey everyone. I finally shipped my personal site after years of dormancy. It’s a fully static Nuxt site with GSAP scrolling animations and a few interactive service cards. Would love to hear your thoughts and critique. Feel free to throw stones😄

Link: https://www.arabdaev.com

Scale or change your images with a JavaScript. https://youtu.be/fK_-OyolZ_Q

Hey everyone,

I open-sourced Templatical last week — a drop-in drag-and-drop email editor SDK that you can embed into any app. After a few years of using Beefree, Unlayer, and others, seeing how they paywall even basic features behind $400-5,000/mo plans, I built an OSS alternative.

Tech stack

• Vue 3 + TipTap for the canvas. TipTap's schema-based extension model + Vue 3's Composition API made the rich-text-editing parts really easy.

• vue-draggable-plus for the drag-and-drop block reordering. Initially used vue-draggable but noticed doesn't support ESM, switched to vue-draggable-plus.

• @vueuse/core — composables like useLocalStorage, useIntervalFn, usePreferredReducedMotion are used in the editor and in the playground.

• Shadow DOM-first mount. The editor renders inside an open Shadow Root by default — host page styles can't leak in, the editor's Tailwind/Vue/TipTap styles can't leak out. Opt out with shadowDom: false if you specifically want light-DOM mounting.

Architecture

• JSON in, MJML out. Templates are typed JSON trees. The renderer (a separate package) converts JSON→ MJML; you compile MJML to email-safe HTML server-side with the standard mjml package. No paid render API, no vendor lock-in.

• Public API is a vanilla init({ container }) function. The canvas is Vue internally, but consumers don't care — call init() from React's useEffect, Svelte's onMount, Angular's ngAfterViewInit, or a plain script tag.

• 9-package monorepo: types, core, core/cloud (subpath), media-library, editor, renderer, quality (a11y linter, more to come), three importers (BeeFree, Unlayer, HTML).

Custom blocks (the part I'm proudest of)

Define a custom block as a schema — typed fields (text, image, color, number, select, boolean, repeatable) plus a Liquid-based template that emits HTML using those values. The editor auto-renders a form from the schema so marketers fill in fields; the renderer wraps the output in <mj-text> for cross-client safety. Optional dataSource.onFetch lets the block hit your API at render time and retrieve data directly to embed. This is the feature gated behind Beefree's $3,000/mo tier.

Other power features

All of these are paywalled in Beefree/Unlayer/similar; all open source here:

• Merge tags with pluggable syntax — handlebars, Liquid, or JS literal templates. Auto-renders human-readable labels in the canvas so marketers don't see raw {{firstName}}

• Display conditions — show/hide blocks based on recipient attributes, with live editor preview.

• Full theming via 27 OKLch design tokens — colors, radii, shadows driven by a design system. Override any of them for hard-enforced brand consistency.

• Template + block defaults — baseline visual config for new templates so marketers stay on-brand without thinking.

• Accessibility linter. Catches missing alt text, low contrast, vague link text in the editor as you work.

License

FSL-1.1-MIT. Auto-converts to plain MIT after 2 years. You can embed it commercially, modify it, redistribute it. The only thing the license forbids is reselling Templatical itself as a competing hosted email-editor SaaS.

Why FSL and not pure MIT: I'm a solo dev working on a managed Cloud tier (AI rewrite, MCP server with live updates, real-time collab, comments, snapshots, saved modules, hosted media gallery) for features that genuinely need a backend. Pure MIT means a well-funded competitor could lift the code and host it as a competing managed service tomorrow, undercutting my ability to keep building it. FSL gives me a 2-year head start on each release before it auto-converts to MIT — enough runway to keep the project sustainable without locking anyone out long-term. Anything that's already in the open-source SDK stays in the open-source SDK, free forever.

Links

• Home: https://templatical.com

• Playground: https://play.templatical.com

• Repo: https://github.com/templatical/sdk

• Docs: https://docs.templatical.com

If you want deeper Q&A — license, architecture, MJML choice - there was good discussion on the Show HN thread last week: https://news.ycombinator.com/item?id=48038019

Happy to answer any questions.