[{"data":1,"prerenderedAt":1774},["ShallowReactive",2],{"guide-placeholder-text-best-practices":3},{"id":4,"title":5,"body":6,"date":1766,"description":1767,"extension":1768,"meta":1769,"navigation":598,"path":1770,"readingTime":639,"seo":1771,"stem":1772,"__hash__":1773},"guides\u002Fguides\u002Fplaceholder-text-best-practices.md","Placeholder Text Best Practices for Design and Development",{"type":7,"value":8,"toc":1735},"minimark",[9,14,18,21,25,30,33,39,55,60,71,76,87,124,128,131,135,149,153,164,168,179,269,273,276,280,294,298,309,313,324,328,331,335,346,350,361,365,376,380,384,387,392,422,427,447,464,468,471,491,495,520,524,528,531,536,763,767,770,836,840,843,849,857,861,864,900,904,908,914,925,1036,1040,1045,1056,1060,1065,1076,1080,1085,1096,1251,1255,1344,1348,1523,1527,1530,1556,1718,1722,1731],[10,11,13],"h2",{"id":12},"what-is-placeholder-text","What is Placeholder Text?",[15,16,17],"p",{},"Placeholder text serves as temporary content in design mockups, prototypes, and development environments. Its primary purpose is to demonstrate layout, typography, and visual hierarchy without requiring final, approved content.",[15,19,20],{},"But not all placeholder text is created equal. The type you choose can significantly impact design decisions, stakeholder feedback, and the ultimate success of your project.",[10,22,24],{"id":23},"types-of-placeholder-text","Types of Placeholder Text",[26,27,29],"h3",{"id":28},"_1-lorem-ipsum-traditional-dummy-text","1. Lorem Ipsum (Traditional Dummy Text)",[15,31,32],{},"Lorem Ipsum is the classic choice, dating back to the 1500s. It's a scrambled version of Cicero's \"De Finibus Bonorum et Malorum.\"",[15,34,35],{},[36,37,38],"strong",{},"Pros:",[40,41,42,46,49,52],"ul",{},[43,44,45],"li",{},"Universally recognized as placeholder",[43,47,48],{},"Distraction-free—stakeholders won't try to \"fix\" the content",[43,50,51],{},"Realistic letter frequency and word length distribution",[43,53,54],{},"Built into most design tools and frameworks",[15,56,57],{},[36,58,59],{},"Cons:",[40,61,62,65,68],{},[43,63,64],{},"No semantic meaning—doesn't represent actual content structure",[43,66,67],{},"Can't test content-driven layout issues",[43,69,70],{},"May cause stakeholders to focus on design rather than content needs",[15,72,73],{},[36,74,75],{},"When to use:",[40,77,78,81,84],{},[43,79,80],{},"Early-stage wireframing",[43,82,83],{},"Visual design exploration",[43,85,86],{},"When you want zero content distraction",[88,89,94],"pre",{"className":90,"code":91,"language":92,"meta":93,"style":93},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Lorem Ipsum example -->\n\u003Cp>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u003C\u002Fp>\n","html","",[95,96,97,106],"code",{"__ignoreMap":93},[98,99,102],"span",{"class":100,"line":101},"line",1,[98,103,105],{"class":104},"sJ8bj","\u003C!-- Lorem Ipsum example -->\n",[98,107,109,113,116,119,121],{"class":100,"line":108},2,[98,110,112],{"class":111},"sVt8B","\u003C",[98,114,15],{"class":115},"s9eBZ",[98,117,118],{"class":111},">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u003C\u002F",[98,120,15],{"class":115},[98,122,123],{"class":111},">\n",[26,125,127],{"id":126},"_2-realisticcontextual-placeholder-text","2. Realistic\u002FContextual Placeholder Text",[15,129,130],{},"This approach uses text that mimics the actual content type your project will contain.",[15,132,133],{},[36,134,38],{},[40,136,137,140,143,146],{},[43,138,139],{},"Reveals content-driven design problems early",[43,141,142],{},"Helps stakeholders visualize the final product",[43,144,145],{},"Tests edge cases like long headlines or short descriptions",[43,147,148],{},"Better for content-first design approaches",[15,150,151],{},[36,152,59],{},[40,154,155,158,161],{},[43,156,157],{},"Time-consuming to create",[43,159,160],{},"May be mistaken for final content",[43,162,163],{},"Can bias design decisions toward the specific example",[15,165,166],{},[36,167,75],{},[40,169,170,173,176],{},[43,171,172],{},"Later-stage prototypes",[43,174,175],{},"When content structure is known",[43,177,178],{},"For user testing with realistic scenarios",[88,180,182],{"className":90,"code":181,"language":92,"meta":93,"style":93},"\u003C!-- Contextual placeholder for a blog card -->\n\u003Cdiv class=\"blog-card\">\n  \u003Ch2>10 Tips for Better CSS Performance\u003C\u002Fh2>\n  \u003Cp>Learn how to optimize your CSS for faster page loads, including techniques for minimizing specificity, removing unused styles, and leveraging modern CSS features.\u003C\u002Fp>\n  \u003Cspan class=\"meta\">Published on Jan 15, 2026 • 8 min read\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[95,183,184,189,209,224,238,259],{"__ignoreMap":93},[98,185,186],{"class":100,"line":101},[98,187,188],{"class":104},"\u003C!-- Contextual placeholder for a blog card -->\n",[98,190,191,193,196,200,203,207],{"class":100,"line":108},[98,192,112],{"class":111},[98,194,195],{"class":115},"div",[98,197,199],{"class":198},"sScJk"," class",[98,201,202],{"class":111},"=",[98,204,206],{"class":205},"sZZnC","\"blog-card\"",[98,208,123],{"class":111},[98,210,212,215,217,220,222],{"class":100,"line":211},3,[98,213,214],{"class":111},"  \u003C",[98,216,10],{"class":115},[98,218,219],{"class":111},">10 Tips for Better CSS Performance\u003C\u002F",[98,221,10],{"class":115},[98,223,123],{"class":111},[98,225,227,229,231,234,236],{"class":100,"line":226},4,[98,228,214],{"class":111},[98,230,15],{"class":115},[98,232,233],{"class":111},">Learn how to optimize your CSS for faster page loads, including techniques for minimizing specificity, removing unused styles, and leveraging modern CSS features.\u003C\u002F",[98,235,15],{"class":115},[98,237,123],{"class":111},[98,239,241,243,245,247,249,252,255,257],{"class":100,"line":240},5,[98,242,214],{"class":111},[98,244,98],{"class":115},[98,246,199],{"class":198},[98,248,202],{"class":111},[98,250,251],{"class":205},"\"meta\"",[98,253,254],{"class":111},">Published on Jan 15, 2026 • 8 min read\u003C\u002F",[98,256,98],{"class":115},[98,258,123],{"class":111},[98,260,262,265,267],{"class":100,"line":261},6,[98,263,264],{"class":111},"\u003C\u002F",[98,266,195],{"class":115},[98,268,123],{"class":111},[26,270,272],{"id":271},"_3-ai-generated-placeholder-text","3. AI-Generated Placeholder Text",[15,274,275],{},"Modern AI tools can generate contextually relevant placeholder content on demand.",[15,277,278],{},[36,279,38],{},[40,281,282,285,288,291],{},[43,283,284],{},"Highly relevant to your domain",[43,286,287],{},"Can match your brand voice",[43,289,290],{},"Generates variations easily",[43,292,293],{},"Can create multiple content lengths",[15,295,296],{},[36,297,59],{},[40,299,300,303,306],{},[43,301,302],{},"Requires tool access and prompt crafting",[43,304,305],{},"May produce content that's too \"interesting\"",[43,307,308],{},"Potential copyright\u002Fethical concerns if not careful",[15,310,311],{},[36,312,75],{},[40,314,315,318,321],{},[43,316,317],{},"When you need domain-specific examples",[43,319,320],{},"For marketing sites where tone matters",[43,322,323],{},"When generating multiple content variations",[26,325,327],{"id":326},"_4-simple-character-repetition","4. Simple Character Repetition",[15,329,330],{},"Using repeated characters like \"aaaa\" or \"xxxx\" for quick mockups.",[15,332,333],{},[36,334,38],{},[40,336,337,340,343],{},[43,338,339],{},"Extremely fast",[43,341,342],{},"Clearly placeholder (no confusion with real content)",[43,344,345],{},"Good for testing overflow and truncation",[15,347,348],{},[36,349,59],{},[40,351,352,355,358],{},[43,353,354],{},"Unrealistic letter frequency",[43,356,357],{},"Ugly and distracting",[43,359,360],{},"Doesn't test typography effectively",[15,362,363],{},[36,364,75],{},[40,366,367,370,373],{},[43,368,369],{},"Quick internal wireframes",[43,371,372],{},"Testing text overflow behavior",[43,374,375],{},"When you literally don't care about appearance",[10,377,379],{"id":378},"placeholder-text-in-design-tools","Placeholder Text in Design Tools",[26,381,383],{"id":382},"figma","Figma",[15,385,386],{},"Figma offers several options for placeholder text:",[15,388,389],{},[36,390,391],{},"Built-in Lorem Ipsum:",[393,394,395,398,408,415],"ol",{},[43,396,397],{},"Select a text layer",[43,399,400,401,404,405],{},"Type ",[95,402,403],{},"lorem"," or ",[95,406,407],{},"lipsum",[43,409,410,411,414],{},"Press ",[95,412,413],{},"Enter"," to generate a paragraph",[43,416,417,418,421],{},"Adjust word count: ",[95,419,420],{},"lorem50"," for 50 words",[15,423,424],{},[36,425,426],{},"Plugins for Better Placeholders:",[40,428,429,435,441],{},[43,430,431,434],{},[36,432,433],{},"Content Reel",": Insert realistic placeholder content (names, dates, images)",[43,436,437,440],{},[36,438,439],{},"Design Content",": Sync content from a spreadsheet",[43,442,443,446],{},[36,444,445],{},"Lorem Ipsum",": More control over generated text",[88,448,452],{"className":449,"code":450,"language":451,"meta":93,"style":93},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Figma plugin example: Content Reel\n\u002F\u002F Insert → Content Reel → Select content type → Apply\n","javascript",[95,453,454,459],{"__ignoreMap":93},[98,455,456],{"class":100,"line":101},[98,457,458],{"class":104},"\u002F\u002F Figma plugin example: Content Reel\n",[98,460,461],{"class":100,"line":108},[98,462,463],{"class":104},"\u002F\u002F Insert → Content Reel → Select content type → Apply\n",[26,465,467],{"id":466},"sketch","Sketch",[15,469,470],{},"Sketch has long included placeholder text features:",[40,472,473,479,485],{},[43,474,475,478],{},[36,476,477],{},"Insert → Text → Placeholder Text",": Generates Lorem Ipsum",[43,480,481,484],{},[36,482,483],{},"Override with Data",": Use the \"Overrides\" panel to populate with real data",[43,486,487,490],{},[36,488,489],{},"Sketch Data Plugin",": Pull from external sources",[26,492,494],{"id":493},"adobe-xd","Adobe XD",[40,496,497,508,514],{},[43,498,499,501,502,504,505],{},[36,500,445],{},": Type ",[95,503,403],{}," and press ",[95,506,507],{},"Tab",[43,509,510,513],{},[36,511,512],{},"Repeat Grid",": Use realistic data in repeated elements",[43,515,516,519],{},[36,517,518],{},"Microsoft Excel Integration",": Import real content via plugins",[10,521,523],{"id":522},"common-mistakes-to-avoid","Common Mistakes to Avoid",[26,525,527],{"id":526},"mistake-1-leaving-placeholder-text-in-production","Mistake 1: Leaving Placeholder Text in Production",[15,529,530],{},"This is the most embarrassing and damaging error. Nothing says \"unfinished\" like Lorem Ipsum on a live site.",[15,532,533],{},[36,534,535],{},"Prevention:",[88,537,539],{"className":449,"code":538,"language":451,"meta":93,"style":93},"\u002F\u002F Add a build-time check\n\u002F\u002F In your CI\u002FCD pipeline\nconst fs = require('fs')\nconst path = require('path')\n\nfunction checkForLoremIpsum(dir) {\n  const files = fs.readdirSync(dir)\n  files.forEach(file => {\n    const filePath = path.join(dir, file)\n    const content = fs.readFileSync(filePath, 'utf8')\n    if (content.includes('Lorem ipsum')) {\n      throw new Error(`Found Lorem Ipsum in ${filePath}`)\n    }\n  })\n}\n",[95,540,541,546,551,576,594,600,617,637,657,677,700,720,745,751,757],{"__ignoreMap":93},[98,542,543],{"class":100,"line":101},[98,544,545],{"class":104},"\u002F\u002F Add a build-time check\n",[98,547,548],{"class":100,"line":108},[98,549,550],{"class":104},"\u002F\u002F In your CI\u002FCD pipeline\n",[98,552,553,557,561,564,567,570,573],{"class":100,"line":211},[98,554,556],{"class":555},"szBVR","const",[98,558,560],{"class":559},"sj4cs"," fs",[98,562,563],{"class":555}," =",[98,565,566],{"class":198}," require",[98,568,569],{"class":111},"(",[98,571,572],{"class":205},"'fs'",[98,574,575],{"class":111},")\n",[98,577,578,580,583,585,587,589,592],{"class":100,"line":226},[98,579,556],{"class":555},[98,581,582],{"class":559}," path",[98,584,563],{"class":555},[98,586,566],{"class":198},[98,588,569],{"class":111},[98,590,591],{"class":205},"'path'",[98,593,575],{"class":111},[98,595,596],{"class":100,"line":240},[98,597,599],{"emptyLinePlaceholder":598},true,"\n",[98,601,602,605,608,610,614],{"class":100,"line":261},[98,603,604],{"class":555},"function",[98,606,607],{"class":198}," checkForLoremIpsum",[98,609,569],{"class":111},[98,611,613],{"class":612},"s4XuR","dir",[98,615,616],{"class":111},") {\n",[98,618,620,623,626,628,631,634],{"class":100,"line":619},7,[98,621,622],{"class":555},"  const",[98,624,625],{"class":559}," files",[98,627,563],{"class":555},[98,629,630],{"class":111}," fs.",[98,632,633],{"class":198},"readdirSync",[98,635,636],{"class":111},"(dir)\n",[98,638,640,643,646,648,651,654],{"class":100,"line":639},8,[98,641,642],{"class":111},"  files.",[98,644,645],{"class":198},"forEach",[98,647,569],{"class":111},[98,649,650],{"class":612},"file",[98,652,653],{"class":555}," =>",[98,655,656],{"class":111}," {\n",[98,658,660,663,666,668,671,674],{"class":100,"line":659},9,[98,661,662],{"class":555},"    const",[98,664,665],{"class":559}," filePath",[98,667,563],{"class":555},[98,669,670],{"class":111}," path.",[98,672,673],{"class":198},"join",[98,675,676],{"class":111},"(dir, file)\n",[98,678,680,682,685,687,689,692,695,698],{"class":100,"line":679},10,[98,681,662],{"class":555},[98,683,684],{"class":559}," content",[98,686,563],{"class":555},[98,688,630],{"class":111},[98,690,691],{"class":198},"readFileSync",[98,693,694],{"class":111},"(filePath, ",[98,696,697],{"class":205},"'utf8'",[98,699,575],{"class":111},[98,701,703,706,709,712,714,717],{"class":100,"line":702},11,[98,704,705],{"class":555},"    if",[98,707,708],{"class":111}," (content.",[98,710,711],{"class":198},"includes",[98,713,569],{"class":111},[98,715,716],{"class":205},"'Lorem ipsum'",[98,718,719],{"class":111},")) {\n",[98,721,723,726,729,732,734,737,740,743],{"class":100,"line":722},12,[98,724,725],{"class":555},"      throw",[98,727,728],{"class":555}," new",[98,730,731],{"class":198}," Error",[98,733,569],{"class":111},[98,735,736],{"class":205},"`Found Lorem Ipsum in ${",[98,738,739],{"class":111},"filePath",[98,741,742],{"class":205},"}`",[98,744,575],{"class":111},[98,746,748],{"class":100,"line":747},13,[98,749,750],{"class":111},"    }\n",[98,752,754],{"class":100,"line":753},14,[98,755,756],{"class":111},"  })\n",[98,758,760],{"class":100,"line":759},15,[98,761,762],{"class":111},"}\n",[26,764,766],{"id":765},"mistake-2-using-placeholder-images-without-aspect-ratio","Mistake 2: Using Placeholder Images Without Aspect Ratio",[15,768,769],{},"Lorem Picsum or similar services provide random images, but they may not match your required dimensions.",[88,771,773],{"className":90,"code":772,"language":92,"meta":93,"style":93},"\u003C!-- ❌ Bad: image might break layout -->\n\u003Cimg src=\"https:\u002F\u002Fpicsum.photos\u002F200\" alt=\"placeholder\" \u002F>\n\n\u003C!-- ✅ Good: specify exact dimensions -->\n\u003Cimg src=\"https:\u002F\u002Fpicsum.photos\u002F800\u002F600\" alt=\"placeholder\" \u002F>\n",[95,774,775,780,806,810,815],{"__ignoreMap":93},[98,776,777],{"class":100,"line":101},[98,778,779],{"class":104},"\u003C!-- ❌ Bad: image might break layout -->\n",[98,781,782,784,787,790,792,795,798,800,803],{"class":100,"line":108},[98,783,112],{"class":111},[98,785,786],{"class":115},"img",[98,788,789],{"class":198}," src",[98,791,202],{"class":111},[98,793,794],{"class":205},"\"https:\u002F\u002Fpicsum.photos\u002F200\"",[98,796,797],{"class":198}," alt",[98,799,202],{"class":111},[98,801,802],{"class":205},"\"placeholder\"",[98,804,805],{"class":111}," \u002F>\n",[98,807,808],{"class":100,"line":211},[98,809,599],{"emptyLinePlaceholder":598},[98,811,812],{"class":100,"line":226},[98,813,814],{"class":104},"\u003C!-- ✅ Good: specify exact dimensions -->\n",[98,816,817,819,821,823,825,828,830,832,834],{"class":100,"line":240},[98,818,112],{"class":111},[98,820,786],{"class":115},[98,822,789],{"class":198},[98,824,202],{"class":111},[98,826,827],{"class":205},"\"https:\u002F\u002Fpicsum.photos\u002F800\u002F600\"",[98,829,797],{"class":198},[98,831,202],{"class":111},[98,833,802],{"class":205},[98,835,805],{"class":111},[26,837,839],{"id":838},"mistake-3-inconsistent-placeholder-lengths","Mistake 3: Inconsistent Placeholder Lengths",[15,841,842],{},"If your design assumes 2-line headlines but your placeholder is 1 line, you won't catch layout issues.",[15,844,845,848],{},[36,846,847],{},"Best Practice:","\nCreate a placeholder content guide:",[88,850,855],{"className":851,"code":853,"language":854},[852],"language-text","Headlines: 40-60 characters (2 lines on mobile)\nSubheadings: 60-80 characters\nBody text: 150-300 characters per paragraph\nExcerpts: 100-150 characters\n","text",[95,856,853],{"__ignoreMap":93},[26,858,860],{"id":859},"mistake-4-forgetting-multilingual-considerations","Mistake 4: Forgetting Multilingual Considerations",[15,862,863],{},"Lorem Ipsum is Latin-based and won't reveal RTL (right-to-left) layout issues.",[88,865,867],{"className":90,"code":866,"language":92,"meta":93,"style":93},"\u003C!-- Test with Arabic placeholder for RTL -->\n\u003C!-- \"نص توضيحي هنا\" = \"Sample text here\" -->\n\u003Cp dir=\"rtl\">نص توضيحي هنا\u003C\u002Fp>\n",[95,868,869,874,879],{"__ignoreMap":93},[98,870,871],{"class":100,"line":101},[98,872,873],{"class":104},"\u003C!-- Test with Arabic placeholder for RTL -->\n",[98,875,876],{"class":100,"line":108},[98,877,878],{"class":104},"\u003C!-- \"نص توضيحي هنا\" = \"Sample text here\" -->\n",[98,880,881,883,885,888,890,893,896,898],{"class":100,"line":211},[98,882,112],{"class":111},[98,884,15],{"class":115},[98,886,887],{"class":198}," dir",[98,889,202],{"class":111},[98,891,892],{"class":205},"\"rtl\"",[98,894,895],{"class":111},">نص توضيحي هنا\u003C\u002F",[98,897,15],{"class":115},[98,899,123],{"class":111},[10,901,903],{"id":902},"best-practices-by-project-stage","Best Practices by Project Stage",[26,905,907],{"id":906},"stage-1-wireframing-low-fidelity","Stage 1: Wireframing (Low Fidelity)",[15,909,910,913],{},[36,911,912],{},"Recommended:"," Simple character repetition or very short Lorem Ipsum",[40,915,916,919,922],{},[43,917,918],{},"Focus on layout, not content",[43,920,921],{},"Use boxes and lines more than text",[43,923,924],{},"Purposefully ugly to avoid premature discussions about wording",[88,926,928],{"className":90,"code":927,"language":92,"meta":93,"style":93},"\u003C!-- Wireframe placeholder -->\n\u003Cdiv class=\"placeholder-box\">\n  \u003Cdiv class=\"line\" style=\"width: 80%\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"line\" style=\"width: 60%\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"line\" style=\"width: 90%\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[95,929,930,935,950,978,1003,1028],{"__ignoreMap":93},[98,931,932],{"class":100,"line":101},[98,933,934],{"class":104},"\u003C!-- Wireframe placeholder -->\n",[98,936,937,939,941,943,945,948],{"class":100,"line":108},[98,938,112],{"class":111},[98,940,195],{"class":115},[98,942,199],{"class":198},[98,944,202],{"class":111},[98,946,947],{"class":205},"\"placeholder-box\"",[98,949,123],{"class":111},[98,951,952,954,956,958,960,963,966,968,971,974,976],{"class":100,"line":211},[98,953,214],{"class":111},[98,955,195],{"class":115},[98,957,199],{"class":198},[98,959,202],{"class":111},[98,961,962],{"class":205},"\"line\"",[98,964,965],{"class":198}," style",[98,967,202],{"class":111},[98,969,970],{"class":205},"\"width: 80%\"",[98,972,973],{"class":111},">\u003C\u002F",[98,975,195],{"class":115},[98,977,123],{"class":111},[98,979,980,982,984,986,988,990,992,994,997,999,1001],{"class":100,"line":226},[98,981,214],{"class":111},[98,983,195],{"class":115},[98,985,199],{"class":198},[98,987,202],{"class":111},[98,989,962],{"class":205},[98,991,965],{"class":198},[98,993,202],{"class":111},[98,995,996],{"class":205},"\"width: 60%\"",[98,998,973],{"class":111},[98,1000,195],{"class":115},[98,1002,123],{"class":111},[98,1004,1005,1007,1009,1011,1013,1015,1017,1019,1022,1024,1026],{"class":100,"line":240},[98,1006,214],{"class":111},[98,1008,195],{"class":115},[98,1010,199],{"class":198},[98,1012,202],{"class":111},[98,1014,962],{"class":205},[98,1016,965],{"class":198},[98,1018,202],{"class":111},[98,1020,1021],{"class":205},"\"width: 90%\"",[98,1023,973],{"class":111},[98,1025,195],{"class":115},[98,1027,123],{"class":111},[98,1029,1030,1032,1034],{"class":100,"line":261},[98,1031,264],{"class":111},[98,1033,195],{"class":115},[98,1035,123],{"class":111},[26,1037,1039],{"id":1038},"stage-2-visual-design-high-fidelity","Stage 2: Visual Design (High Fidelity)",[15,1041,1042,1044],{},[36,1043,912],{}," Lorem Ipsum or generated paragraphs",[40,1046,1047,1050,1053],{},[43,1048,1049],{},"Test typography, spacing, and visual hierarchy",[43,1051,1052],{},"Use realistic word counts",[43,1054,1055],{},"Begin testing dark mode and responsive behavior",[26,1057,1059],{"id":1058},"stage-3-prototyping-interactive","Stage 3: Prototyping (Interactive)",[15,1061,1062,1064],{},[36,1063,912],{}," Contextual placeholders or AI-generated content",[40,1066,1067,1070,1073],{},[43,1068,1069],{},"Stakeholders should see near-realistic content",[43,1071,1072],{},"Test user flows with believable scenarios",[43,1074,1075],{},"Prepare for user testing",[26,1077,1079],{"id":1078},"stage-4-development","Stage 4: Development",[15,1081,1082,1084],{},[36,1083,912],{}," Real content when possible, contextual placeholders otherwise",[40,1086,1087,1090,1093],{},[43,1088,1089],{},"Use actual API responses or CMS content",[43,1091,1092],{},"Document placeholder content requirements",[43,1094,1095],{},"Create a \"content complete\" checklist",[88,1097,1099],{"className":449,"code":1098,"language":451,"meta":93,"style":93},"\u002F\u002F Component with clear placeholder indication\n\u002F\u002F Good: clearly marked\nconst BlogCard = ({ title = \"Placeholder Title\", excerpt = \"Lorem ipsum...\" }) => {\n  const isPlaceholder = title === \"Placeholder Title\"\n  return (\n    \u003Cdiv className={isPlaceholder ? 'opacity-50' : ''}>\n      \u003Ch2>{title}\u003C\u002Fh2>\n      \u003Cp>{excerpt}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  )\n}\n",[95,1100,1101,1106,1111,1150,1168,1176,1206,1220,1233,1242,1247],{"__ignoreMap":93},[98,1102,1103],{"class":100,"line":101},[98,1104,1105],{"class":104},"\u002F\u002F Component with clear placeholder indication\n",[98,1107,1108],{"class":100,"line":108},[98,1109,1110],{"class":104},"\u002F\u002F Good: clearly marked\n",[98,1112,1113,1115,1118,1120,1123,1126,1128,1131,1134,1137,1139,1142,1145,1148],{"class":100,"line":211},[98,1114,556],{"class":555},[98,1116,1117],{"class":198}," BlogCard",[98,1119,563],{"class":555},[98,1121,1122],{"class":111}," ({ ",[98,1124,1125],{"class":612},"title",[98,1127,563],{"class":555},[98,1129,1130],{"class":205}," \"Placeholder Title\"",[98,1132,1133],{"class":111},", ",[98,1135,1136],{"class":612},"excerpt",[98,1138,563],{"class":555},[98,1140,1141],{"class":205}," \"Lorem ipsum...\"",[98,1143,1144],{"class":111}," }) ",[98,1146,1147],{"class":555},"=>",[98,1149,656],{"class":111},[98,1151,1152,1154,1157,1159,1162,1165],{"class":100,"line":226},[98,1153,622],{"class":555},[98,1155,1156],{"class":559}," isPlaceholder",[98,1158,563],{"class":555},[98,1160,1161],{"class":111}," title ",[98,1163,1164],{"class":555},"===",[98,1166,1167],{"class":205}," \"Placeholder Title\"\n",[98,1169,1170,1173],{"class":100,"line":240},[98,1171,1172],{"class":555},"  return",[98,1174,1175],{"class":111}," (\n",[98,1177,1178,1181,1183,1186,1188,1191,1194,1197,1200,1203],{"class":100,"line":261},[98,1179,1180],{"class":111},"    \u003C",[98,1182,195],{"class":115},[98,1184,1185],{"class":198}," className",[98,1187,202],{"class":555},[98,1189,1190],{"class":111},"{isPlaceholder ",[98,1192,1193],{"class":555},"?",[98,1195,1196],{"class":205}," 'opacity-50'",[98,1198,1199],{"class":555}," :",[98,1201,1202],{"class":205}," ''",[98,1204,1205],{"class":111},"}>\n",[98,1207,1208,1211,1213,1216,1218],{"class":100,"line":619},[98,1209,1210],{"class":111},"      \u003C",[98,1212,10],{"class":115},[98,1214,1215],{"class":111},">{title}\u003C\u002F",[98,1217,10],{"class":115},[98,1219,123],{"class":111},[98,1221,1222,1224,1226,1229,1231],{"class":100,"line":639},[98,1223,1210],{"class":111},[98,1225,15],{"class":115},[98,1227,1228],{"class":111},">{excerpt}\u003C\u002F",[98,1230,15],{"class":115},[98,1232,123],{"class":111},[98,1234,1235,1238,1240],{"class":100,"line":659},[98,1236,1237],{"class":111},"    \u003C\u002F",[98,1239,195],{"class":115},[98,1241,123],{"class":111},[98,1243,1244],{"class":100,"line":679},[98,1245,1246],{"class":111},"  )\n",[98,1248,1249],{"class":100,"line":702},[98,1250,762],{"class":111},[10,1252,1254],{"id":1253},"placeholder-text-generators-and-tools","Placeholder Text Generators and Tools",[1256,1257,1258,1274],"table",{},[1259,1260,1261],"thead",{},[1262,1263,1264,1268,1271],"tr",{},[1265,1266,1267],"th",{},"Tool",[1265,1269,1270],{},"Type",[1265,1272,1273],{},"Best For",[1275,1276,1277,1289,1300,1311,1322,1333],"tbody",{},[1262,1278,1279,1283,1286],{},[1280,1281,1282],"td",{},"Lorem Ipsum Generator",[1280,1284,1285],{},"Traditional",[1280,1287,1288],{},"Quick paragraphs",[1262,1290,1291,1294,1297],{},[1280,1292,1293],{},"Faker.js",[1280,1295,1296],{},"Programmatic",[1280,1298,1299],{},"Realistic fake data",[1262,1301,1302,1305,1308],{},[1280,1303,1304],{},"Content Reel (Figma)",[1280,1306,1307],{},"Design tool plugin",[1280,1309,1310],{},"Contextual design content",[1262,1312,1313,1316,1319],{},[1280,1314,1315],{},"Unsplash\u002FPicsum",[1280,1317,1318],{},"Images",[1280,1320,1321],{},"Placeholder images",[1262,1323,1324,1327,1330],{},[1280,1325,1326],{},"ChatGPT\u002FClaude",[1280,1328,1329],{},"AI-generated",[1280,1331,1332],{},"Domain-specific content",[1262,1334,1335,1338,1341],{},[1280,1336,1337],{},"Bored API",[1280,1339,1340],{},"Random data",[1280,1342,1343],{},"Unique placeholder text",[26,1345,1347],{"id":1346},"using-fakerjs-in-development","Using Faker.js in Development",[88,1349,1351],{"className":449,"code":1350,"language":451,"meta":93,"style":93},"import { faker } from '@faker-js\u002Ffaker'\n\nconst mockData = {\n  title: faker.lorem.sentence(),\n  excerpt: faker.lorem.paragraph(),\n  author: faker.person.fullName(),\n  date: faker.date.recent().toLocaleDateString(),\n  image: faker.image.url(),\n}\n\n\u002F\u002F Generate 10 blog posts\nconst blogPosts = Array.from({ length: 10 }, () => ({\n  title: faker.lorem.sentence({ min: 4, max: 8 }),\n  excerpt: faker.lorem.paragraph({ min: 2, max: 4 }),\n}))\n",[95,1352,1353,1367,1371,1382,1393,1403,1413,1429,1439,1443,1447,1452,1480,1501,1518],{"__ignoreMap":93},[98,1354,1355,1358,1361,1364],{"class":100,"line":101},[98,1356,1357],{"class":555},"import",[98,1359,1360],{"class":111}," { faker } ",[98,1362,1363],{"class":555},"from",[98,1365,1366],{"class":205}," '@faker-js\u002Ffaker'\n",[98,1368,1369],{"class":100,"line":108},[98,1370,599],{"emptyLinePlaceholder":598},[98,1372,1373,1375,1378,1380],{"class":100,"line":211},[98,1374,556],{"class":555},[98,1376,1377],{"class":559}," mockData",[98,1379,563],{"class":555},[98,1381,656],{"class":111},[98,1383,1384,1387,1390],{"class":100,"line":226},[98,1385,1386],{"class":111},"  title: faker.lorem.",[98,1388,1389],{"class":198},"sentence",[98,1391,1392],{"class":111},"(),\n",[98,1394,1395,1398,1401],{"class":100,"line":240},[98,1396,1397],{"class":111},"  excerpt: faker.lorem.",[98,1399,1400],{"class":198},"paragraph",[98,1402,1392],{"class":111},[98,1404,1405,1408,1411],{"class":100,"line":261},[98,1406,1407],{"class":111},"  author: faker.person.",[98,1409,1410],{"class":198},"fullName",[98,1412,1392],{"class":111},[98,1414,1415,1418,1421,1424,1427],{"class":100,"line":619},[98,1416,1417],{"class":111},"  date: faker.date.",[98,1419,1420],{"class":198},"recent",[98,1422,1423],{"class":111},"().",[98,1425,1426],{"class":198},"toLocaleDateString",[98,1428,1392],{"class":111},[98,1430,1431,1434,1437],{"class":100,"line":639},[98,1432,1433],{"class":111},"  image: faker.image.",[98,1435,1436],{"class":198},"url",[98,1438,1392],{"class":111},[98,1440,1441],{"class":100,"line":659},[98,1442,762],{"class":111},[98,1444,1445],{"class":100,"line":679},[98,1446,599],{"emptyLinePlaceholder":598},[98,1448,1449],{"class":100,"line":702},[98,1450,1451],{"class":104},"\u002F\u002F Generate 10 blog posts\n",[98,1453,1454,1456,1459,1461,1464,1466,1469,1472,1475,1477],{"class":100,"line":722},[98,1455,556],{"class":555},[98,1457,1458],{"class":559}," blogPosts",[98,1460,563],{"class":555},[98,1462,1463],{"class":111}," Array.",[98,1465,1363],{"class":198},[98,1467,1468],{"class":111},"({ length: ",[98,1470,1471],{"class":559},"10",[98,1473,1474],{"class":111}," }, () ",[98,1476,1147],{"class":555},[98,1478,1479],{"class":111}," ({\n",[98,1481,1482,1484,1486,1489,1492,1495,1498],{"class":100,"line":747},[98,1483,1386],{"class":111},[98,1485,1389],{"class":198},[98,1487,1488],{"class":111},"({ min: ",[98,1490,1491],{"class":559},"4",[98,1493,1494],{"class":111},", max: ",[98,1496,1497],{"class":559},"8",[98,1499,1500],{"class":111}," }),\n",[98,1502,1503,1505,1507,1509,1512,1514,1516],{"class":100,"line":753},[98,1504,1397],{"class":111},[98,1506,1400],{"class":198},[98,1508,1488],{"class":111},[98,1510,1511],{"class":559},"2",[98,1513,1494],{"class":111},[98,1515,1491],{"class":559},[98,1517,1500],{"class":111},[98,1519,1520],{"class":100,"line":759},[98,1521,1522],{"class":111},"}))\n",[10,1524,1526],{"id":1525},"the-future-content-first-design","The Future: Content-First Design",[15,1528,1529],{},"Modern web design increasingly adopts a \"content-first\" approach, where placeholder text becomes less necessary:",[393,1531,1532,1538,1544,1550],{},[43,1533,1534,1537],{},[36,1535,1536],{},"Start with real content"," when possible",[43,1539,1540,1543],{},[36,1541,1542],{},"Use CMS content"," during design phase",[43,1545,1546,1549],{},[36,1547,1548],{},"Design systems"," include content guidelines",[43,1551,1552,1555],{},[36,1553,1554],{},"Component-driven development"," uses realistic examples",[88,1557,1559],{"className":449,"code":1558,"language":451,"meta":93,"style":93},"\u002F\u002F In a content-first workflow, your component might look like:\nconst TestimonialCard = ({ quote, author, role }) => (\n  \u003Cblockquote>\n    \u003Cp>\"{quote}\"\u003C\u002Fp>\n    \u003Cfooter>\n      \u003Ccite>{author}\u003C\u002Fcite>, {role}\n    \u003C\u002Ffooter>\n  \u003C\u002Fblockquote>\n)\n\n\u002F\u002F With real or realistic props from the start:\n\u003CTestimonialCard \n  quote=\"This product transformed our workflow completely.\"\n  author=\"Jane Smith\"\n  role=\"CTO, TechCorp\"\n\u002F>\n",[95,1560,1561,1566,1596,1605,1618,1627,1642,1650,1659,1663,1667,1672,1682,1692,1702,1712],{"__ignoreMap":93},[98,1562,1563],{"class":100,"line":101},[98,1564,1565],{"class":104},"\u002F\u002F In a content-first workflow, your component might look like:\n",[98,1567,1568,1570,1573,1575,1577,1580,1582,1585,1587,1590,1592,1594],{"class":100,"line":108},[98,1569,556],{"class":555},[98,1571,1572],{"class":198}," TestimonialCard",[98,1574,563],{"class":555},[98,1576,1122],{"class":111},[98,1578,1579],{"class":612},"quote",[98,1581,1133],{"class":111},[98,1583,1584],{"class":612},"author",[98,1586,1133],{"class":111},[98,1588,1589],{"class":612},"role",[98,1591,1144],{"class":111},[98,1593,1147],{"class":555},[98,1595,1175],{"class":111},[98,1597,1598,1600,1603],{"class":100,"line":211},[98,1599,214],{"class":111},[98,1601,1602],{"class":115},"blockquote",[98,1604,123],{"class":111},[98,1606,1607,1609,1611,1614,1616],{"class":100,"line":226},[98,1608,1180],{"class":111},[98,1610,15],{"class":115},[98,1612,1613],{"class":111},">\"{quote}\"\u003C\u002F",[98,1615,15],{"class":115},[98,1617,123],{"class":111},[98,1619,1620,1622,1625],{"class":100,"line":240},[98,1621,1180],{"class":111},[98,1623,1624],{"class":115},"footer",[98,1626,123],{"class":111},[98,1628,1629,1631,1634,1637,1639],{"class":100,"line":261},[98,1630,1210],{"class":111},[98,1632,1633],{"class":115},"cite",[98,1635,1636],{"class":111},">{author}\u003C\u002F",[98,1638,1633],{"class":115},[98,1640,1641],{"class":111},">, {role}\n",[98,1643,1644,1646,1648],{"class":100,"line":619},[98,1645,1237],{"class":111},[98,1647,1624],{"class":115},[98,1649,123],{"class":111},[98,1651,1652,1655,1657],{"class":100,"line":639},[98,1653,1654],{"class":111},"  \u003C\u002F",[98,1656,1602],{"class":115},[98,1658,123],{"class":111},[98,1660,1661],{"class":100,"line":659},[98,1662,575],{"class":111},[98,1664,1665],{"class":100,"line":679},[98,1666,599],{"emptyLinePlaceholder":598},[98,1668,1669],{"class":100,"line":702},[98,1670,1671],{"class":104},"\u002F\u002F With real or realistic props from the start:\n",[98,1673,1674,1676,1679],{"class":100,"line":722},[98,1675,112],{"class":111},[98,1677,1678],{"class":559},"TestimonialCard",[98,1680,1681],{"class":111}," \n",[98,1683,1684,1687,1689],{"class":100,"line":747},[98,1685,1686],{"class":198},"  quote",[98,1688,202],{"class":555},[98,1690,1691],{"class":205},"\"This product transformed our workflow completely.\"\n",[98,1693,1694,1697,1699],{"class":100,"line":753},[98,1695,1696],{"class":198},"  author",[98,1698,202],{"class":555},[98,1700,1701],{"class":205},"\"Jane Smith\"\n",[98,1703,1704,1707,1709],{"class":100,"line":759},[98,1705,1706],{"class":198},"  role",[98,1708,202],{"class":555},[98,1710,1711],{"class":205},"\"CTO, TechCorp\"\n",[98,1713,1715],{"class":100,"line":1714},16,[98,1716,1717],{"class":111},"\u002F>\n",[10,1719,1721],{"id":1720},"related-tools","Related Tools",[40,1723,1724],{},[43,1725,1726,1730],{},[1727,1728,1282],"a",{"href":1729},"\u002Ftools\u002Florem-ipsum"," - Generate customizable placeholder text",[1732,1733,1734],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":93,"searchDepth":108,"depth":108,"links":1736},[1737,1738,1744,1749,1755,1761,1764,1765],{"id":12,"depth":108,"text":13},{"id":23,"depth":108,"text":24,"children":1739},[1740,1741,1742,1743],{"id":28,"depth":211,"text":29},{"id":126,"depth":211,"text":127},{"id":271,"depth":211,"text":272},{"id":326,"depth":211,"text":327},{"id":378,"depth":108,"text":379,"children":1745},[1746,1747,1748],{"id":382,"depth":211,"text":383},{"id":466,"depth":211,"text":467},{"id":493,"depth":211,"text":494},{"id":522,"depth":108,"text":523,"children":1750},[1751,1752,1753,1754],{"id":526,"depth":211,"text":527},{"id":765,"depth":211,"text":766},{"id":838,"depth":211,"text":839},{"id":859,"depth":211,"text":860},{"id":902,"depth":108,"text":903,"children":1756},[1757,1758,1759,1760],{"id":906,"depth":211,"text":907},{"id":1038,"depth":211,"text":1039},{"id":1058,"depth":211,"text":1059},{"id":1078,"depth":211,"text":1079},{"id":1253,"depth":108,"text":1254,"children":1762},[1763],{"id":1346,"depth":211,"text":1347},{"id":1525,"depth":108,"text":1526},{"id":1720,"depth":108,"text":1721},"2026-05-26","Learn the best practices for placeholder text in design and development. Compare Lorem Ipsum, real content, and AI-generated text for different project stages.","md",{"immutable":598},"\u002Fguides\u002Fplaceholder-text-best-practices",{"title":5,"description":1767},"guides\u002Fplaceholder-text-best-practices","Vmsdb_58boNQJiizcV0XXHzCVyCo9USvHrHa-adhh_Q",1780401324344]