Documentation

Technical guides for developers building with Developer Hub.

Getting Started

Platform Overview

Developer Hub is a SaaS platform designed to accelerate frontend and backend development workflows. It provides a suite of interactive tools (generators, playgrounds, converters) and a programmatic SEO system for content scaling.

Account Creation

To access premium tools and save your configurations, you must create an account. We utilize Supabase Auth for secure identity management.

  1. Navigate to the Register Page.
  2. Sign up using your email and password.
  3. Verify your email address (required for account activation).

Authentication

Authentication is handled via secure, HTTP-only cookies managed by Supabase. Session persistence allows you to remain logged in across page reloads and browser sessions until explicit logout.

Accessing Tools

Tools are categorized by domain (Frontend, Backend, Design).
Navigate to Products in the navbar to view the full catalog. Most tools are browser-based and require no installation.

Free vs Premium

  • Free Tier: Access to core tools (Playgrounds, CSS Generators, Converters).
  • Premium Tier: Dynamic features (AI Code Generation, Cloud Storage, prioritizing support).

Need help? Contact support at support@developerhub.in or check our GitHub.

Tool Documentation

Live HTML/CSS/JS Editor

Overview

A client-side code playground that renders HTML, CSS, and JavaScript in real-time. Designed for specialized frontend developers to prototype components or test snippets in isolation.

How It Works

  • Inputs: Three separate text areas for HTML structure, CSS styles, and JavaScript logic.
  • Processing: Code is injected into a sandboxed `iframe` on the client side.
  • Outputs: Visual rendering of the combined code.

Limits & Notes

  • Execution: JavaScript runs in the user's browser (client-side).
  • Security: Iframe is sandboxed to prevent XSS and cookie access.
  • Storage: Code is not saved to the database in the Free tier.
Free Access

CSS Animation Playground

Overview

A visual generator for CSS `@keyframes` animations. Frontend developers can check easing functions and timing interactions visually before copying code.

How to Use

  1. Select a preset (Bounce, Spin, Pulse).
  2. Adjust the **Duration** slider (0.1s - 5s).
  3. Select a **Timing Function** (e.g., `ease-in-out`).
  4. Click **Copy** to get the CSS code.

Example Output

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
Free Access

Security & Privacy

We prioritize the security of your code and personal data. Below is a transparent overview of our security practices.

Authentication Security

All authentication is managed by Supabase. We do not store passwords. We use industry-standard encryption protocols (JWTs) and secure, HTTP-only cookies to manage sessions.

Data Privacy

Your data is stored securely using industry-standard encryption. We follow best practices for data protection and never share your information with third parties.

Data Collection

We believe in minimal data collection. Here is exactly what we store:

Data TypePurposeStored?
EmailAccount identification & billingYes
Code SnippetsSaved projects (Premium only)Yes (Encrypted)
Usage AnalyticsImprove user experienceYes (Anonymized)

Billing & Subscriptions

Available Plans

Free / Starter

Forever free access to client-side tools, calculators, and public playgrounds.

Pro / Premium

Unlocks AI generation, cloud storage for code, and priority support.

Subscription Lifecycle

  • Start: Subscriptions begin immediately upon payment confirmation.
  • Renewal: Plans renew automatically each month/year unless cancelled.
  • Cancellation: You can cancel at any time from your Dashboard. You will retain access until the end of the current billing cycle.

Refund Policy

We offer a 14-day money-back guarantee for initial subscriptions if you are unsatisfied with the service.