在线工具

开发常用

• npm trends 比较 npm package 的下载情况
• Bundlephobia 分析 npm package 的依赖、bundle 后的大小、下载速度预估
• Package Phobia 查询 npm package 的安装体积（磁盘大小）

沙箱

• CodeSandbox
• Codepen
• StackBlitz
• JSFiddle
• Javascript Playground (Sandbox, Repl)
• RunJS 前端专用的笔记工具

正则

• 正则可视化工具
  • regulex
  • regexper
  • 正则可视化
• regex101 在线正则测试工具
• regexgen 生成与一组字符串匹配的正则表达式
• any-rule 正则大全

代码编译

• ast 生成器
• rollup

JS 相关

• Babel
• TypeScript

Vue

• Vue Template Explorer
• Vue 3 Template Explorer
• Vue SFC Playground

CSS 预处理器

• Sass Playground
• Less-To-CSS Playground
• Stylus Playground
  • 英文官网
  • 中文站点

代码生成

• webcode.tools Web 代码生成工具 (CSS、HTML、meta 信息、JSON 等)
• nginx 配置可视化生成 (github)

CSS 相关

• Animista 在线练习和生成 CSS 动画
• CSS Loaders 600+ 的 CSS 加载动画
• CSS Grid Generator grid 布局
• Cubic-Bezier 贝塞尔曲线
• WebGradients 渐变色配色
• CSS Gradient 线性和径向渐变生成
• Easing Gradients 线性渐变生成
• Clippy — CSS clip-path maker clip-path 裁剪路径生成
• FANCY-BORDER-RADIUS border-radius 圆角生成
• CSS Shadows Generator box-shadow 阴影生成
• Customize your CSS Border border 生成
• Neumorphism/Soft UI generator border-radius / background / box-shadow 生成

SVG 相关

• Get Waves SVG 波浪生成器
• Shapedivider SVG 波浪生成器
• Blobmaker 随机生成不规则形状
• Haikei 快速制作各种尺寸、样式的背景图

CDN

• jsDelivr
• esm.sh

图片处理

• 在线 PS | 稿定设计
• Photo Editor: BeFunky 免费在线照片编辑器（支持中文）
• Edit•Photo 免费在线照片编辑器

在线抠图

• 图片去除背景
  • remove.bg
  • BgRemover
  • PhotoScissors
  • Clipping Magic
• 水印去除剂 - 删除照片中的任何水印 图片去水印
• 删除照片中的物体 | Magic Eraser by Magic Studio

图片压缩

• squoosh Google 开源的图片压缩工具
• TinyPNG
• docsmall

图片生成

• Shields.io 绘制小徽章
• 生成 Github 仓库 Star 增长图
  • Star Charts 数据更详细
  • Star history 手绘风格
• Notion 风格头像制作

作图工具

• ProcessOn 免费在线流程图思维导图
• Draw.io 流程图
• Excalidraw 手绘风格流程图

文件处理

• 在线格式转换
  • CloudConvert 在线文件转换器，支持 200+ 种格式、支持自定义设置、图片可在线预览（英文界面）
  • Convertio 在线转换文件的简单工具，支持 300+ 种格式、支持自定义设置（最大 100M）
• PDF Editor Free 在线编辑 PDF 文件