JM.

Featured project

DevData Generator

Browser-based fake data generator that creates one reusable dataset and exposes the same result through table, JSON, CSV and SQL outputs.

Runs entirely in the browser; no backend or database is required.

Back to HomeView repository

Overview

DevData Generator is a browser-based tool for configuring realistic fake datasets and reusing one generated result across table, JSON, CSV and SQL outputs.

DevData Generator configured with the Users template and three generated records shown in a table.
The real DevData interface connects dataset configuration, generation, preview and export in one workflow.

How it works

A validated configuration crosses one generation boundary, then the shared result branches into preview and export paths.

One generated result

One generation produces one reusable generatedData result. Table preview, JSON preview, clipboard copy and every download reuse those same records.

generatedData

The same result is used by

  • Table preview
  • JSON preview
  • Clipboard copy
  • Downloads and exports

Predictable invalidation

Changing the dataset configuration clears the previous generated result so stale records are not presented as current.

generatedData is cleared when

  • Template changes
  • Selected fields change
  • Quantity changes
Verified sourcesrc/App.jsx
setSelectedTemplate(templateId)
setSelectedFields(newTemplate.fields.map((field) => field.id))
setGeneratedData([])

const handleFieldChange = (fieldId) => {
  setSelectedFields((currentFields) =>
    currentFields.includes(fieldId)
      ? currentFields.filter((id) => id !== fieldId)
      : [...currentFields, fieldId],
  )
  setGeneratedData([])
}

const handleNumberRecordsChange = (value) => {
  setNumberRecords(value)
  setGeneratedData([])
}

Template, selected-field and quantity handlers each clear generatedData after changing configuration.

Output formats

The same generatedData is serialized into three reusable representations.

Illustrative outputIllustrative data, not a recorded execution

JSON

                    [
  {
    "nombre": "Ana Torres",
    "email": "[email protected]"
  }
]

CSV

                    "nombre";"email"
"Ana Torres";"[email protected]"

SQL

                    INSERT INTO usuarios (nombre, email) VALUES ('Ana Torres', '[email protected]');

The same illustrative record is shown as JSON, semicolon-delimited CSV and a downloadable SQL INSERT statement.

Browser-only architecture

React coordinates the workflow in the browser. The generation utility uses Faker, then serializers and browser-native APIs transform and deliver the shared result.

  1. React
  2. Generation utility + Faker
  3. generatedData
  4. Serializers + Browser APIs

No backend or database is required.

SQL is generated as downloadable text; it is not executed.