⚡ WEPOST — Floating API DevTools

A lightweight, embeddable Postman-like tool that lives inside your browser, WebView, or any frontend framework. WEPOST is a floating API debugging widget that can be injected into any web application with a single script or installed via npm. It is designed for developers who want to test APIs instantly without switching tools.

🌍 Language / Bahasa / 语言 / 언어

• 🇺🇸 English
• 🇮🇩 Bahasa Indonesia
• 🇨🇳 中文
• 🇰🇷 한국어

🇺🇸 English

✨ Features

• ⚡ Floating "WP" button: DevTools-style launcher widget.
• 🪟 Draggable API panel: Freely repositionable user interface.
• 🌐 HTTP methods: Full support for GET, POST, PUT, DELETE, and PATCH.
• 🧾 Advanced Editor: Embedded Headers and JSON body editor.
• 📡 Live response viewer: Inspect status codes, response times, and payloads.
• 💾 Request history: Locally persisted logs using localStorage.
• 🔁 One-click replay: Instantly re-run previous API requests.
• 📱 Mobile-Optimized: Fully functional within Android & iOS WebViews.
• 🎨 Sleek UI: Clean, dark developer tools aesthetics.
• 🧠 Framework Agnostic: Seamless integration with React, Vue, Angular, etc.

🚀 Installation

📦 NPM

npm install wepost

🌐 CDN

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

⚡ Auto Init (Quick Start)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>

🧪 Usage

🟢 JavaScript (NPM / Module)

import WePost from "wepost";

const wepost = new WePost({
  defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
});

wepost.mount();

🌐 CDN (Vanilla JS)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
<script>
  const wepost = new WePost({
    defaultUrl: "[https://api.example.com](https://api.example.com)"
  });
  wepost.mount();
</script>

📱 Android WebView / iOS WebView

Just inject the script into your core web layout:

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

👉 The floating WP button will automatically appear in the lower corner of the viewport.

🧠 How It Works

1. A floating WP button appears on the page.
2. Click it → The main DevTools panel slides open.
3. Enter API request details: URL, Method, Headers, and Body.
4. Click Send to execute.
5. View the real-time Response payload instantly.

🧩 Optional Proxy Mode (CORS Fix)

If your target API restricts client-side browser requests via CORS, initialize the proxy layer:

npm run proxy

Then configure your instance:

const wepost = new WePost({
  proxyUrl: "http://localhost:4000/proxy"
});

🌍 Framework Support

WEPOST runs everywhere modern JavaScript does:

• React ⚛️ / Vue 🟢 / Angular 🟦 / Svelte 🧡
• Next.js / Nuxt 🚀
• Vanilla JS 🌐
• Laravel Blade / PHP 🐘
• Android WebView 📱 / iOS WebView 🍎

⚡ Example Usage in Laravel

@if (app()->environment('local'))
  <script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
  <script>
    new WePost({
      defaultUrl: "/api"
    }).mount();
  </script>
@endif

🔥 Use Cases

• In-context API debugging without leaving the browser tab.
• Lightweight alternative to external apps (like Postman or Insomnia) for testing environments.
• Real-time mobile API inspection inside cross-platform WebViews.
• Pre-integrated utility for Internal Admin Dashboards.
• Embeddable SaaS platform developer widgets.

📦 Equivalent cURL Example

Every request structured via WEPOST corresponds to standard specifications:

curl -X POST [https://api.example.com/users](https://api.example.com/users) \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer TOKEN" \
  -d '{"name":"John"}'

🚀 Why WEPOST?

• No Context Switching: Test endpoint states within the app context.
• Ultra Lightweight: Minimal bundle footprint.
• Developer-First Design: Clean layouts mapped directly to development mental workflows.

🤝 Contribute

We welcome all community suggestions! Planned feature vectors include:

• Request Collections & Environment Variables.
• Cloud Synchronization & Shared Team Workspaces.
• Native GraphQL Schema Introspection.
• Automation & Assertions runner.

📜 License

Licensed under the MIT License — feel free to modify, extend, and deploy.

🇮🇩 Bahasa Indonesia

✨ Fitur Utama

• ⚡ Tombol Floating "WP": Peluncur widget dengan gaya DevTools yang minimalis.
• 🪟 Panel Fleksibel: Antarmuka panel API yang dapat digeser secara bebas.
• 🌐 Metode HTTP Komplit: Mendukung penuh GET, POST, PUT, DELETE, dan PATCH.
• 🧾 Editor Header & JSON Body: Kelola payload dan header autentikasi dengan mudah.
• 📡 Viewer Live Response: Pantau status kode, waktu respons, dan data kembalian secara real-time.
• 💾 Riwayat Otomatis: Menyimpan log request sebelumnya menggunakan localStorage.
• 🔁 Jalankan Ulang Instan: Eksekusi kembali request lama hanya dengan satu klik.
• 📱 Kompatibel Seluler: Berjalan mulus di dalam Android WebView maupun iOS WebView.
• 🎨 UI Dark Mode Elegan: Desain gelap khas alat pengembangan profesional.
• 🧠 Bebas Framework: Dapat diintegrasikan langsung pada React, Vue, Angular, dsb.

🚀 Instalasi

📦 NPM

npm install wepost

🌐 CDN

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

⚡ Inisialisasi Otomatis (Cepat)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>

🧪 Cara Penggunaan

🟢 JavaScript (NPM / Modul)

import WePost from "wepost";

const wepost = new WePost({
  defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
});

wepost.mount();

🌐 CDN (Vanilla JS)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
<script>
  const wepost = new WePost({
    defaultUrl: "[https://api.example.com](https://api.example.com)"
  });
  wepost.mount();
</script>

📱 Android WebView / iOS WebView

Cukup injeksikan script berikut ke dalam file layout utama Anda:

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

👉 Tombol floating WP akan muncul secara otomatis di sudut layar Anda.

🧠 Cara Kerja

1. Tombol melayang WP muncul di halaman web.
2. Klik tombol tersebut → Panel DevTools utama akan terbuka.
3. Masukkan detail request API: URL, Metode HTTP, Header, dan Body JSON.
4. Klik Send untuk mengirim.
5. Lihat hasil Response secara instan di tempat yang sama.

🧩 Mode Proxy Opsional (Solusi CORS)

Jika API Anda memblokir request langsung dari browser karena masalah kebijakan CORS:

npm run proxy

Lalu konfigurasikan instance seperti ini:

const wepost = new WePost({
  proxyUrl: "http://localhost:4000/proxy"
});

🌍 Dukungan Framework

WEPOST bekerja di semua framework frontend modern:

• React ⚛️ / Vue 🟢 / Angular 🟦 / Svelte 🧡
• Next.js / Nuxt 🚀
• Vanilla JS 🌐
• Laravel Blade / PHP 🐘
• Android WebView 📱 / iOS WebView 🍎

⚡ Contoh Penggunaan di Laravel

@if (app()->environment('local'))
  <script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
  <script>
    new WePost({
      defaultUrl: "/api"
    }).mount();
  </script>
@endif

🔥 Kasus Penggunaan

• Debugging API langsung di dalam aplikasi tanpa perlu berpindah tab browser.
• Menggantikan aplikasi eksternal (seperti Postman) untuk pengujian cepat di lingkungan lokal.
• Pengujian endpoint API seluler langsung dari dalam WebView bawaan.
• Dashboard Admin internal atau utilitas alat pengembang bawaan SaaS.

📦 Contoh cURL yang Setara

Setiap request yang disusun di WEPOST setara dengan standar perintah cURL berikut:

curl -X POST [https://api.example.com/users](https://api.example.com/users) \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer TOKEN" \
  -d '{"name":"John"}'

🚀 Mengapa Memilih WEPOST?

• Tanpa Pindah Aplikasi: Fokus pada alur kerja Anda tanpa distraksi aplikasi eksternal.
• Sangat Ringan: Tidak membebani performa pemuatan aplikasi.
• Desain Khusus Developer: UI efisien yang disesuaikan untuk kenyamanan debugging cepat.

🤝 Kontribusi

Kami sangat terbuka dengan saran pengembangan fitur baru! Beberapa rencana ke depan:

• Manajemen Koleksi Request & Environment Variables.
• Sinkronisasi Cloud & Ruang Kerja Tim.
• Dukungan Introspeksi Skema GraphQL.
• Pengujian API Otomatis.

📜 Lisensi

Dilisensikan di bawah MIT License — Bebas digunakan, dimodifikasi, dan didistribusikan kembali.

🇨🇳 中文

✨ 功能特性

• ⚡ 悬浮 "WP" 按钮： 经典开发者工具风格的悬浮启动按钮。
• 🪟 可拖拽 API 面板： 自由调整位置，不遮挡网页内容。
• 🌐 全面的 HTTP 方法支持： 完整支持 GET, POST, PUT, DELETE 和 PATCH 请求。
• 🧾 高级编辑器： 内置功能完善的 Headers 请求头与 JSON Body 编辑器。
• 📡 实时响应查看器： 快速查看状态码、耗时及响应数据。
• 💾 请求历史记录： 基于 localStorage 自动持久化本地历史日志。
• 🔁 一键重试： 单击即可重新运行先前的 API 请求。
• 📱 移动端深度优化： 完美适配 Android WebView 和 iOS WebView 环境。
• 🎨 极简极客 UI： 清爽的高级暗黑系 DevTools 界面风格。
• 🧠 框架无关性： 100% 兼容 React, Vue, Angular, Svelte 等各类前端框架。

🚀 安装指南

📦 NPM

npm install wepost

🌐 CDN

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

⚡ 自动初始化 (快速开始)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>

🧪 使用方法

🟢 JavaScript (NPM / 模块化导入)

import WePost from "wepost";

const wepost = new WePost({
  defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
});

wepost.mount();

🌐 CDN (原生 JavaScript)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
<script>
  const wepost = new WePost({
    defaultUrl: "[https://api.example.com](https://api.example.com)"
  });
  wepost.mount();
</script>

📱 Android WebView / iOS WebView

只需将脚本注入到您的核心 Web 视图层：

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

👉 悬浮的 WP 按钮将自动显示在视窗的一角。

🧠 核心工作原理

1. 页面上会呈现一个悬浮的 WP 按钮。
2. 点击按钮 → 侧边或底部 DevTools 面板 展开。
3. 输入 API 详情：URL、请求方法、Headers 和 Body 参数。
4. 点击 Send 发送请求。
5. 在下方无缝实时查看响应结果。

🧩 可选代理模式 (解决 CORS 跨域限制)

如果您的目标接口由于浏览器的同源策略限制了 CORS 请求，请开启内置代理：

npm run proxy

然后初始化如下配置：

const wepost = new WePost({
  proxyUrl: "http://localhost:4000/proxy"
});

🌍 框架兼容性

WEPOST 支持所有现代主流的前端技术栈：

• React ⚛️ / Vue 🟢 / Angular 🟦 / Svelte 🧡
• Next.js / Nuxt 🚀
• Vanilla JS 🌐
• Laravel Blade / PHP 🐘
• Android WebView 📱 / iOS WebView 🍎

⚡ Laravel 环境中的嵌入示例

@if (app()->environment('local'))
  <script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
  <script>
    new WePost({
      defaultUrl: "/api"
    }).mount();
  </script>
@endif

🔥 适用场景

• 网页内直接调试 API，无需在浏览器和外部工具间频繁切换标签。
• 作为移动端 WebView 混合应用中，快速检测后端接口的轻量级后备方案。
• 免去臃肿的外部应用（如 Postman、Insomnia），加速本地快速验证。
• 轻松集成至内部管理后台、SaaS 开发者控制台或预览环境。

📦 等效 cURL 示例

在 WEPOST 中构建的任何请求均可以标准 cURL 规范呈现：

curl -X POST [https://api.example.com/users](https://api.example.com/users) \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer TOKEN" \
  -d '{"name":"John"}'

🚀 为什么选择 WEPOST？

• 绝不跳出： 原生内嵌，让 API 调试回归构建的发生地。
• 极致轻量： 极低的文件体积占用，秒级加载。
• 开发者至上： 针对日常高频排查流深度精简的交互逻辑。

🤝 参与贡献

我们非常期待社区的加入！以下是即将扩展的功能：

• 请求集合（Request Collections）与多环境变量管理。
• 云端同步与团队协作共享空间。
• 原生 GraphQL 架构内省与请求支持。
• 自动化端到端测试用例执行。

📜 开源协议

遵循 MIT 开源协议 — 鼓励自由使用、修改与衍生开发。

🇰🇷 한국어

✨ 주요 기능

• ⚡ 플로팅 "WP" 버튼: DevTools 스타일의 직관적인 실행 버튼 지원.
• 🪟 드래그 가능한 API 패널: 화면 어디든 자유롭게 이동 가능한 패널 레이아웃.
• 🌐 HTTP 메서드 완벽 지원: GET, POST, PUT, DELETE, PATCH 지원.
• 🧾 고급 에디터 내장: Headers 및 JSON Body 수정 기능 탑재.
• 📡 라이브 응답 뷰어: 상태 코드, 응답 속도 및 데이터를 실시간으로 인스펙션.
• 💾 요청 기록 저장: localStorage를 통한 이전 요청 히스토리 자동 보존.
• 🔁 원클릭 재실행: 수동 재입력 없이 이전 API 요청을 즉시 다시 실행.
• 📱 모바일 웹뷰 최적화: Android WebView 및 iOS WebView 내 완벽 작동.
• 🎨 세련된 다크 UI: 깔끔하고 몰입도 높은 개발자 전용 다크 테마.
• 🧠 프레임워크 독립성: React, Vue, Angular 등 어떠한 환경에서도 완벽 가동.

🚀 설치 방법

📦 NPM

npm install wepost

🌐 CDN

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

⚡ 자동 초기화 (빠른 시작)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>

🧪 사용법

🟢 JavaScript (NPM / 모듈 방식)

import WePost from "wepost";

const wepost = new WePost({
  defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
});

wepost.mount();

🌐 CDN (바닐라 자바스크립트)

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
<script>
  const wepost = new WePost({
    defaultUrl: "[https://api.example.com](https://api.example.com)"
  });
  wepost.mount();
</script>

📱 Android WebView / iOS WebView

메인 웹 레이아웃에 아래 스크립트를 삽입하기만 하면 됩니다:

<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>

👉 플로팅 WP 버튼이 화면 한 구석에 자동으로 나타납니다.

🧠 작동 원리

1. 화면에 플로팅 WP 버튼이 생성됩니다.
2. 버튼을 클릭하면 메인 DevTools 패널이 열립니다.
3. API 요청 세부 정보인 URL, 메서드, Headers, Body를 입력합니다.
4. Send 버튼을 클릭하여 API 요청을 전송합니다.
5. 실시간으로 반환되는 응답(Response) 결과를 패널에서 즉시 확인합니다.

🧩 프록시 모드 활성화 (CORS 문제 해결)

대상 API 서버가 브라우저의 CORS 정책으로 인해 요청을 차단하는 경우, 로컬 프록시 서버를 가동하세요:

npm run proxy

그런 다음 인스턴스 설정을 적용합니다:

const wepost = new WePost({
  proxyUrl: "http://localhost:4000/proxy"
});

🌍 프레임워크 지원

WEPOST는 모든 프론트엔드 에코시스템과 상호 호환됩니다:

• React ⚛️ / Vue 🟢 / Angular 🟦 / Svelte 🧡
• Next.js / Nuxt 🚀
• Vanilla JS 🌐
• Laravel Blade / PHP 🐘
• Android WebView 📱 / iOS WebView 🍎

⚡ Laravel 환경 적용 예시

@if (app()->environment('local'))
  <script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
  <script>
    new WePost({
      defaultUrl: "/api"
    }).mount();
  </script>
@endif

🔥 주요 유스케이스

• 별도의 창 전환 없이 브라우저 내부에서 다이렉트로 진행하는 즉각적인 API 디버깅.
• 가벼운 테스트 환경 구축을 위해 무거운 외부 앱(Postman 등)을 전면 대체.
• 하이브리드 모바일 WebView 개발 단계에서 네트워크 데이터 검증용 도구로 활용.
• 사내 전용 어드민 대시보드 및 SaaS 개발자 도구 위젯 임베딩.

📦 동일한 cURL 명령어 예시

WEPOST에서 테스트한 모든 요청 구조는 표준 cURL 형태로 상호 호환됩니다:

curl -X POST [https://api.example.com/users](https://api.example.com/users) \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer TOKEN" \
  -d '{"name":"John"}'

🚀 왜 WEPOST 인가요?

• 화면 전환 제로: 개발 중인 도메인 환경 내부에서 그대로 테스트할 수 있습니다.
• 초경량 번들: 번들 크기를 혁신적으로 압축하여 사이트 성능에 영향을 주지 않습니다.
• 개발자 친화적 설계: 디버깅의 핵심적인 요소를 압축한 미니멀 디자인.

🤝 기여하기

커뮤니티의 다양한 피드백과 참여를 환영합니다! 예정된 로드맵은 다음과 같습니다:

• 요청 컬렉션(Postman 스타일) 및 환경 변수 설정 기능.
• 클라우드 동기화 및 팀 단위 공유 워크스페이스 제공.
• 네이티브 GraphQL 인트로스펙션 및 쿼리 지원.
• 테스트 자동화 실행 스크립트 도구 지원.

📜 라이선스

본 프로젝트는 MIT License 하에 배포됩니다 — 자유롭게 수정, 활용 및 구축할 수 있습니다.