npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

gen-poster-f

v0.0.8

Published

---

Readme


📦 更新日志

  • 2025/05/27:新增 PromiseBuilder 组件
  • 2025/06/2
  • 🐛 修复Text组件参数声明问题
  • 2025/06/3
  • ➕ 新增 useState Hook
  • ➕ 新增 StateBuilder 配套组件,搭配useState使用。
  • 🐛 修复图片再次刷新时不切换图片bug

🧩 关于插件:GenPoster

万物皆组件,未来海报构建新方案

GenPoster 是一款基于 Canvas 的跨平台海报生成框架,具备以下特点:

  • 🚫 非 DOM 构建:完全抛弃 HTML 布局,真正做到“在画布上写代码”。
  • 💡 组件化设计:借鉴 Flutter 的构建思想,UI 渲染采用树形结构。
  • 🚀 跨平台支持:一次编码,多端运行,兼容多种前端平台。
  • 🔌 纯原生构建:支持 htmlvue2vue3jstsangular 等技术栈。
  • 🎨 Canvas 自绘方式:完美规避平台内生图兼容性问题。
  • 拒绝 JSON 配置式布局:坚持代码式构建,体验更丝滑。
  • 📞 平台适配中:如果未支持你的平台,请联系作者添加支持。

🛠️ 使用方法

先安装库

 npm i gen-poster-f

1. 构建组件:就像 Flutter 一样

一个简单的橙色盒子:

Container({
	width: 100,
	height: 100,
	color: Colors.orange
})

是不是很直观?


2. 布局嵌套:容器中的容器

横向排列三个间隔为 10 的橙色方块:

const box = Container({
	width: 100,
	height: 100,
	color: Colors.orange
});

Row({
	spacing: 10,
	children: [box, box, box]
});

💡 你可以试试把 Row 改成 Column 看看效果!


3. 对齐方式:让内容井然有序

通过 alignment 控制子组件对齐方式:

Container({
	width: 300,
	height: 300,
	color: Colors.grey200,
	alignment: Alignment.center,
	child: Container({
		width: 100,
		height: 100,
		color: Colors.blue
	})
});

支持对齐方式包括:centerleftright 等。


4. 更多玩法:下载 Demo 体验未来布局方案

📥 下载 Demo

  • 内含完整示例与组件用法
  • 请参考 Demo 中的 必看.md 文件获取安装与使用细节
  • ⚠️ 本库为 JS SDK,不是 uni_modules 模块

🎯 结语

GenPoster 是一个自由、灵活、极具未来感的布局框架。 与其说是一个海报工具,不如说它是 “在画布上写 UI 的引擎”。 告别繁琐 JSON,拥抱代码构建!


如需帮助或平台适配,请联系作者。


🆘 需要帮助


QQ交流群:811955833