p5-svelte

在 Svelte 中像组件一样轻松嵌入 p5 创意草图

p5-svelte 是一个将 p5.js 创意编程库与 Svelte 框架无缝集成的轻量级工具。它解决了在 Svelte 项目中手动管理 p5 画布生命周期、响应式更新和组件卸载清理的繁琐问题，让开发者能够以声明式的方式创建和管理 p5 草图。核心能力包括：通过简单的组件标签嵌入 p5 草图、自动处理画布创建与销毁、支持 Svelte 响应式变量与 p5 绘图逻辑的联动、提供友好的 TypeScript 类型支持。项目处于早期阶段，但 API 设计简洁，适合希望用 Svelte 构建数据可视化、交互艺术或创意编码应用的开发者。

开源 free 设计创意
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 189
维护状态 低维护
是否开源 是
定价模式 free

项目数据

分类设计创意
开发团队tonyketcham
所属国家
官网地址https://p5-svelte.netlify.app
GitHubhttps://github.com/tonyketcham/p5-svelte
定价模式free
价格说明开源项目，MIT许可证，完全免费，无付费版本。
访问状态
是否开源是
开源协议MIT
主要语言Svelte
技术栈/模型generative-art,p5,p5js,svelte,svelte-components
GitHub 星标★ 189
30天Star增速
HF 下载量
上线时间2020-08-03 00:00:00
最近更新2026-03-27 00:00:00
维护状态低维护
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数3

使用教程

核心亮点

  • 声明式组件封装，无需手动处理 p5 画布挂载和清理
  • 与 Svelte 响应式系统深度集成，数据变化自动触发重绘
  • 提供 TypeScript 类型，开发体验友好

不足之处

  • 项目早期，API 可能随版本变动
  • 文档和示例相对较少，社区生态待观察

适用场景

  • 在 Svelte 应用中快速添加交互式数据可视化
  • 构建创意编程作品集或艺术生成器
  • 教学场景中演示 p5.js 与前端框架的结合

替代项目

svelte-p5、p5-svelte-wrapper、svelte-p5-component

项目介绍

p5-svelte 是设计创意领域的开源项目，由 tonyketcham 开发，2020 年首次发布。

它收录于设计创意分类，该分类目前共有 163 个项目，GitHub 星标数为 189。

项目已超过三个月没有代码更新，维护节奏明显放缓，最近一次代码更新于 2026-03-27。MIT许可证，完全免费，无付费版本。

它主要面向的使用场景是：在Svelte应用中快速添加交互式数据可视化。同类可对比的替代方案包括 svelte-p5、p5-svelte-wrapper、svelte-p5-component。

上一篇：wgshadertoy

下一篇：curv

同类项目推荐

open-design 开源

让 AI 代工做界面，本地跑完随手改

Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ L···

★ 97629 2026-08-09
Excalidraw 开源

开源虚拟白板协作工具

Virtual whiteboard for sketching hand-drawn like diagrams

★ 132673 2026-08-19
morph 开源

用数据直接生成设计、动画和交互可视化

Morph is a free and open-source tool for creating designs, animations or interactive···

★ 126 2026-08-09
ChatGPT-MidJourney-prompt 开源

输入一句话，AI帮你生成Midjourney完整提示词

This is a ChatGPT based prompt generation model for MidJorney. The purpose of this m···

★ 343 2026-08-09