[{"data":1,"prerenderedAt":407},["ShallowReactive",2],{"header-latest-en":3},[4],{"id":5,"title":6,"body":7,"date":374,"description":375,"extension":376,"faq":377,"image":393,"lang":394,"meta":395,"navigation":396,"path":397,"published":396,"readTime":370,"seo":398,"stem":399,"tags":400,"updated":405,"__hash__":406},"blog\u002Fblog\u002Fen\u002Fdata-mocker.md","From Manual Fixtures to a Browser Data Mocker",{"type":8,"value":9,"toc":362},"minimark",[10,14,19,22,34,43,57,61,69,74,293,297,331,335,349,355,359],[11,12,13],"p",{},"In development, some tasks can't be fully automated — but they can be reduced to two clicks. Test data preparation is one of them.",[15,16,18],"h2",{"id":17},"from-manual-fixtures-to-fakerjs","From manual fixtures to Faker.js",[11,20,21],{},"For a long time, the only way to get test data was to write it by hand. Ten JSON objects with made-up names, addresses, and phones — a chore you can't delegate but can automate.",[11,23,24,25,29,30,33],{},"In 2012, ",[26,27,28],"strong",{},"Marak Squires"," released ",[26,31,32],{},"Faker.js"," — a library that generates realistic data: names, addresses, phone numbers, emails, text, and more. It quickly became the de facto standard, with ports appearing for PHP (FakerPHP), Python (Faker), Ruby (Faker), and others.",[11,35,36,37,42],{},"The idea is simple: instead of making up \"John Doe, ",[38,39,41],"a",{"href":40},"mailto:john@example.com","john@example.com",", +1-555-0100\" by hand, you tell the generator \"give me 50 users with name, email, and phone\" — and get a ready-made array.",[11,44,45,46,52,53,56],{},"Faker.js also has one of the more dramatic backstories in the npm ecosystem. In January 2022, frustrated that companies were using his free labor without paying for it, Squires deliberately pushed a corrupted release of faker.js (along with his other popular package, colors.js) that broke thousands of dependent projects — including tools built on AWS's CDK. npm reverted the malicious versions, but Squires' own package was effectively abandoned afterward. The community forked the last clean version as ",[26,47,48],{},[49,50,51],"code",{},"@faker-js\u002Ffaker",", which is the actively maintained project used today; the original ",[49,54,55],{},"faker"," package on npm is now deprecated.",[15,58,60],{"id":59},"data-mocker-a-schema-builder-in-the-browser","Data Mocker: a schema builder in the browser",[11,62,63,64,68],{},"Faker.js is powerful, but for a one-off task, installing a library and writing a script is overkill. ",[38,65,67],{"href":66},"\u002Ftools\u002Fdata-mocker","Data Mocker"," solves the same problem without setup:",[70,71,73],"h3",{"id":72},"_18-field-types","18 field types",[75,76,77,90],"table",{},[78,79,80],"thead",{},[81,82,83,87],"tr",{},[84,85,86],"th",{},"Type",[84,88,89],{},"What it generates",[91,92,93,104,114,124,134,144,154,164,174,192,202,220,230,240,250,260,270,283],"tbody",{},[81,94,95,101],{},[96,97,98],"td",{},[26,99,100],{},"Primary Key",[96,102,103],{},"Auto-incrementing IDs (1, 2, 3…) with configurable start value",[81,105,106,111],{},[96,107,108],{},[26,109,110],{},"Name",[96,112,113],{},"Random full names (first + last)",[81,115,116,121],{},[96,117,118],{},[26,119,120],{},"Email",[96,122,123],{},"Realistic email addresses from random name + domain",[81,125,126,131],{},[96,127,128],{},[26,129,130],{},"UUID",[96,132,133],{},"Unique identifiers (v4)",[81,135,136,141],{},[96,137,138],{},[26,139,140],{},"Phone",[96,142,143],{},"Phone numbers",[81,145,146,151],{},[96,147,148],{},[26,149,150],{},"Avatar URL",[96,152,153],{},"Profile picture placeholder URLs",[81,155,156,161],{},[96,157,158],{},[26,159,160],{},"ISO Date",[96,162,163],{},"Random dates within the past 2 years",[81,165,166,171],{},[96,167,168],{},[26,169,170],{},"Price",[96,172,173],{},"Random decimal prices (0–1000)",[81,175,176,181],{},[96,177,178],{},[26,179,180],{},"Number",[96,182,183,184,187,188,191],{},"Integers with configurable digit count (e.g. ",[49,185,186],{},"3"," for 100–999, ",[49,189,190],{},"1-4"," for 1–9999)",[81,193,194,199],{},[96,195,196],{},[26,197,198],{},"Boolean",[96,200,201],{},"Random true\u002Ffalse",[81,203,204,209],{},[96,205,206],{},[26,207,208],{},"Text \u002F Lorem",[96,210,211,212,215,216,219],{},"Lorem ipsum text — configurable paragraphs (",[49,213,214],{},"3p",") or character range (",[49,217,218],{},"100-500",")",[81,221,222,227],{},[96,223,224],{},[26,225,226],{},"City",[96,228,229],{},"Random city names from a pool of 40 cities",[81,231,232,237],{},[96,233,234],{},[26,235,236],{},"Country",[96,238,239],{},"Random country names from a pool of 40 countries",[81,241,242,247],{},[96,243,244],{},[26,245,246],{},"Company",[96,248,249],{},"Random company names (Acme Corp, Stark Industries, etc.)",[81,251,252,257],{},[96,253,254],{},[26,255,256],{},"URL",[96,258,259],{},"Random URLs with scheme, domain, and path",[81,261,262,267],{},[96,263,264],{},[26,265,266],{},"IPv4",[96,268,269],{},"Random IP addresses",[81,271,272,277],{},[96,273,274],{},[26,275,276],{},"Enum",[96,278,279,280,219],{},"Random pick from your own comma-separated values (e.g. ",[49,281,282],{},"active, inactive, pending",[81,284,285,290],{},[96,286,287],{},[26,288,289],{},"Custom",[96,291,292],{},"Literal text you type yourself",[70,294,296],{"id":295},"schema-management","Schema management",[298,299,300,307,313,319,325],"ul",{},[301,302,303,306],"li",{},[26,304,305],{},"Auto-save"," — your current schema is saved to localStorage on every change. Reload the page and it's still there.",[301,308,309,312],{},[26,310,311],{},"Save \u002F Load"," — save named schemas to reuse later. Click Save, type a name, done. Load picks from your saved schemas.",[301,314,315,318],{},[26,316,317],{},"Update"," — saving with an existing name overwrites it. The button text changes to \"Update\" automatically.",[301,320,321,324],{},[26,322,323],{},"Reset"," — one click restores the default schema.",[301,326,327,330],{},[26,328,329],{},"Export \u002F Import"," — download your schema as a JSON file, or import a schema from a file. Share schemas with your team.",[70,332,334],{"id":333},"output","Output",[298,336,337,340,343,346],{},[301,338,339],{},"Set row count from 1 to 200 using the stepper control",[301,341,342],{},"Switch between JSON and CSV output",[301,344,345],{},"Copy to clipboard or download as a file",[301,347,348],{},"Live preview updates as you edit the schema",[11,350,351,354],{},[26,352,353],{},"Quick start:"," open the tool → click \"Add field\" a few times → pick types (Name, Email, UUID) → set 10 rows → copy the JSON — ready test data for your component.",[15,356,358],{"id":357},"related-tools","Related tools",[357,360],{":slug":361},"[\"data-mocker\",\"json-toolbox\",\"sql-formatter\",\"regex-tester\"]",{"title":363,"searchDepth":364,"depth":364,"links":365},"",2,[366,367,373],{"id":17,"depth":364,"text":18},{"id":59,"depth":364,"text":60,"children":368},[369,371,372],{"id":72,"depth":370,"text":73},3,{"id":295,"depth":370,"text":296},{"id":333,"depth":370,"text":334},{"id":357,"depth":364,"text":358},"2026-08-30","Why realistic fixtures beat hand-written JSON, and how our local Data Mocker builds JSON or CSV from schemas with 18 field types.","md",[378,381,384,387,390],{"q":379,"a":380},"Why do I need a test data generator?","When developing a frontend or testing an API, you need realistic data — users, orders, products. Typing it by hand is tedious. A mock data generator creates a set of records from a schema in seconds.",{"q":382,"a":383},"What is Faker.js?","Faker.js is a library for generating fake data, created by Marak Squires in 2012. It can generate names, addresses, phones, emails, text, and more in dozens of languages. The original package is no longer maintained — in January 2022, Squires deliberately sabotaged his own faker.js in protest, and the community fork @faker-js\u002Ffaker is now the actively maintained, most widely used version in the JavaScript ecosystem.",{"q":385,"a":386},"Does Data Mocker send my data to a server?","No. Data Mocker runs entirely in the browser. All data is generated locally, nothing is sent to any server.",{"q":388,"a":389},"How is Data Mocker different from Faker.js?","Faker.js is a Node.js library you need to install and import. Data Mocker is a ready-to-use web page: open it, configure the schema, copy the JSON or CSV. No installation required, perfect for one-off data generation.",{"q":391,"a":392},"Can I save and reuse schemas?","Yes. Data Mocker auto-saves your current schema to localStorage. You can also save named schemas, load them later, reset to defaults, or export\u002Fimport schemas as JSON files.","\u002Fimages\u002Fblog\u002Fblog_data-mocker.webp","en",{},true,"\u002Fblog\u002Fen\u002Fdata-mocker",{"title":6,"description":375},"blog\u002Fen\u002Fdata-mocker",[401,32,402,403,67,404],"test data generation","mock data","test fixtures","schema builder",null,"QLLPi5vaiAcaslpKzeK9e2xT0ncMd009RwqjhFWtk9U",1788079936916]