[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":43,"showcases":319,"links":320,"dates":378},"\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"GraphCDN product screens examples - Nicelydone","Browse GraphCDN screen design examples. Preview the interface screenshots and explore related UI patterns. The GraphQL CDN","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4fb393c5-98dd-4173-867f-7cceb99140a6.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"GraphCDN design examples","\u002Fexamples\u002Fapps\u002Fgraphcdn",{"label":23,"to":4},"GraphCDN product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"GraphCDN","graphcdn","The GraphQL CDN","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgraphcdn-c61498d9.png","https:\u002F\u002Fgraphcdn.io",[35,39],{"id":36,"title":37,"slug":38},48,"Developer Tools","developer-tools",{"id":40,"title":41,"slug":42},37,"Developer APIs","developer-apis",[44,69,86,99,131,161,186,205,225,247,265,296],{"uuid":45,"title":46,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":62,"app":67},"4fb393c5-98dd-4173-867f-7cceb99140a6","Login – GraphCDN","Sign-in screen where the user authenticates with GitHub, GitLab, or a passwordless email link.",3072,1724,"Login – GraphCDN from GraphCDN","screen",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},4,"Sign In","sign-in",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",[63],{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":48,"height":74,"image_alt":75,"kind":51,"patterns":76,"component_categories":82,"app":84},"b49a7fb4-af77-4a55-80e3-6dca4e38341d","Signup – GraphCDN","Signup screen where the user can create an account using GitHub, GitLab, or by entering an email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb49a7fb4-af77-4a55-80e3-6dca4e38341d.png",2018,"Signup – GraphCDN from GraphCDN",[77],{"id":78,"label":79,"slug":80,"rank":57,"group":81},5,"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[83],{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":46,"description":88,"canonical_path":4,"image":89,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":90,"component_categories":96,"app":97},"36a57f19-d004-476d-95b8-3e9776f3cdbc","Verification screen confirming that a magic login link has been sent to the user's email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F36a57f19-d004-476d-95b8-3e9776f3cdbc.png",[91],{"id":92,"label":93,"slug":94,"rank":57,"group":95},6,"Verification","verification",{"id":59,"label":60,"slug":61},[],{"slug":30,"title":29,"logo":32,"categories":98},[],{"uuid":100,"title":101,"description":102,"canonical_path":4,"image":103,"width":48,"height":49,"image_alt":104,"kind":51,"patterns":105,"component_categories":119,"app":129},"ce7e53dd-6cd2-414e-87d8-d7f9094f8d07","GraphCDN - The GraphQL CDN","Onboarding step where the user enters their full name to set up their profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fce7e53dd-6cd2-414e-87d8-d7f9094f8d07.png","GraphCDN - The GraphQL CDN from GraphCDN",[106,114],{"id":107,"label":108,"slug":109,"rank":57,"group":110},75,"Setup Wizard","setup-wizard",{"id":111,"label":112,"slug":113},7,"Onboarding & Education","onboarding-and-education",{"id":115,"label":116,"slug":117,"rank":59,"group":118},77,"Welcome","welcome",{"id":111,"label":112,"slug":113},[120,124,128],{"id":121,"title":122,"slug":123},227,"Stepper","stepper",{"id":125,"title":126,"slug":127},174,"Card","card",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":130},[],{"uuid":132,"title":101,"description":133,"canonical_path":4,"image":134,"width":48,"height":49,"image_alt":104,"kind":51,"patterns":135,"component_categories":155,"app":159},"b6025a05-b3ac-48ab-a710-174479be2dd3","Onboarding step where the user enters their full name to begin account setup.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb6025a05-b3ac-48ab-a710-174479be2dd3.png",[136,141,149],{"id":137,"label":138,"slug":139,"rank":57,"group":140},74,"Onboarding Checklist","onboarding-checklist",{"id":111,"label":112,"slug":113},{"id":142,"label":143,"slug":144,"rank":59,"group":145},3,"Profile","profile",{"id":146,"label":147,"slug":148},11,"Social & Collaboration","social-and-collaboration",{"id":150,"label":151,"slug":152,"rank":153,"group":154},72,"Getting Started","getting-started",2,{"id":111,"label":112,"slug":113},[156,157,158],{"id":121,"title":122,"slug":123},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":48,"height":166,"image_alt":167,"kind":51,"patterns":168,"component_categories":180,"app":184},"cf7b5d87-59e7-422e-9f09-d7efb3775605","Welcome to GraphCDN!","Onboarding step where the user sets up their organization by providing company name, product type, engineering team size, and their title.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcf7b5d87-59e7-422e-9f09-d7efb3775605.png",3266,"Welcome to GraphCDN! from GraphCDN",[169,171,173],{"id":107,"label":108,"slug":109,"rank":57,"group":170},{"id":111,"label":112,"slug":113},{"id":137,"label":138,"slug":139,"rank":59,"group":172},{"id":111,"label":112,"slug":113},{"id":174,"label":175,"slug":176,"rank":153,"group":177},42,"Form","form",{"id":54,"label":178,"slug":179},"Data & Analysis","data-and-analysis",[181,182,183],{"id":121,"title":122,"slug":123},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":185},[],{"uuid":187,"title":163,"description":188,"canonical_path":4,"image":189,"width":48,"height":166,"image_alt":167,"kind":51,"patterns":190,"component_categories":199,"app":203},"ece21be4-83d9-4d44-9a25-dd3dc76e6d5a","Onboarding step where the user sets up their organization by providing company details, product type, engineer count, and their title.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fece21be4-83d9-4d44-9a25-dd3dc76e6d5a.png",[191,193,197],{"id":107,"label":108,"slug":109,"rank":57,"group":192},{"id":111,"label":112,"slug":113},{"id":59,"label":194,"slug":195,"rank":59,"group":196},"Account Setup","account-setup",{"id":59,"label":60,"slug":61},{"id":174,"label":175,"slug":176,"rank":153,"group":198},{"id":54,"label":178,"slug":179},[200,201,202],{"id":121,"title":122,"slug":123},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":204},[],{"uuid":206,"title":101,"description":207,"canonical_path":4,"image":208,"width":48,"height":209,"image_alt":104,"kind":51,"patterns":210,"component_categories":219,"app":223},"57c41348-88bb-49b9-85dd-c26e7bf8d714","Onboarding step where the user chooses whether to activate edge caching and reviews included features before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F57c41348-88bb-49b9-85dd-c26e7bf8d714.png",3454,[211,213],{"id":107,"label":108,"slug":109,"rank":57,"group":212},{"id":111,"label":112,"slug":113},{"id":111,"label":214,"slug":215,"rank":59,"group":216},"Add & Create","add-and-create",{"id":153,"label":217,"slug":218},"Actions","actions",[220,221,222],{"id":121,"title":122,"slug":123},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":224},[],{"uuid":226,"title":101,"description":227,"canonical_path":4,"image":228,"width":48,"height":229,"image_alt":104,"kind":51,"patterns":230,"component_categories":237,"app":245},"5c3e57fe-cadd-4864-8e81-658818c5eaa7","Onboarding step where the user enters their GraphQL API URL to configure their endpoint, with an option to skip and use demo data.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5c3e57fe-cadd-4864-8e81-658818c5eaa7.png",2902,[231,233,235],{"id":107,"label":108,"slug":109,"rank":57,"group":232},{"id":111,"label":112,"slug":113},{"id":59,"label":194,"slug":195,"rank":59,"group":234},{"id":59,"label":60,"slug":61},{"id":111,"label":214,"slug":215,"rank":153,"group":236},{"id":153,"label":217,"slug":218},[238,242,243,244],{"id":239,"title":240,"slug":241},240,"Horizontal navigation","horizontal-navigation",{"id":121,"title":122,"slug":123},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":246},[],{"uuid":248,"title":101,"description":249,"canonical_path":4,"image":250,"width":48,"height":49,"image_alt":104,"kind":51,"patterns":251,"component_categories":262,"app":263},"74440b8f-b94e-4dd2-b7e0-377a5e2411ab","Onboarding step where the system displays a loading spinner while creating the user's caching and analytics endpoint.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F74440b8f-b94e-4dd2-b7e0-377a5e2411ab.png",[252,260],{"id":253,"label":254,"slug":255,"rank":57,"group":256},120,"Loading","loading",{"id":257,"label":258,"slug":259},12,"States & Feedback","states-and-feedback",{"id":137,"label":138,"slug":139,"rank":59,"group":261},{"id":111,"label":112,"slug":113},[],{"slug":30,"title":29,"logo":32,"categories":264},[],{"uuid":266,"title":267,"description":268,"canonical_path":4,"image":269,"width":48,"height":270,"image_alt":271,"kind":51,"patterns":272,"component_categories":287,"app":294},"b7b6b7e0-05c7-48f1-bb31-afd0c0616d8e","Try out the caching","Onboarding step where the user tests their newly deployed GraphCDN service by writing and running a GraphQL query in an embedded IDE.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb7b6b7e0-05c7-48f1-bb31-afd0c0616d8e.png",3690,"Try out the caching from GraphCDN",[273,280,285],{"id":274,"label":275,"slug":276,"rank":57,"group":277},28,"AI Chat","ai-chat",{"id":142,"label":278,"slug":279},"AI","ai",{"id":281,"label":282,"slug":283,"rank":59,"group":284},29,"AI Editing","ai-editing",{"id":142,"label":278,"slug":279},{"id":150,"label":151,"slug":152,"rank":153,"group":286},{"id":111,"label":112,"slug":113},[288,289,293],{"id":239,"title":240,"slug":241},{"id":290,"title":291,"slug":292},233,"Tabs","tabs",{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":295},[],{"uuid":297,"title":267,"description":298,"canonical_path":4,"image":299,"width":48,"height":270,"image_alt":271,"kind":51,"patterns":300,"component_categories":309,"app":317},"0e28c445-edeb-4a2c-9c34-fb8417c7810e","Demo page where the user tests GraphQL edge caching by executing a sample query in an interactive playground and reviewing the response metadata.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0e28c445-edeb-4a2c-9c34-fb8417c7810e.png",[301],{"id":302,"label":303,"slug":304,"rank":57,"group":305},145,"Demo Page","demo-page",{"id":306,"label":307,"slug":308},15,"Marketing Page Types","marketing-page-types",[310,314,315,316],{"id":311,"title":312,"slug":313},202,"Footer","footer",{"id":290,"title":291,"slug":292},{"id":125,"title":126,"slug":127},{"id":64,"title":65,"slug":66},{"slug":30,"title":29,"logo":32,"categories":318},[],[],[321,323,325,327,329,331,333,335,337,339,341,343,345,348,351,354,357,360,362,366,370,374],{"label":108,"to":322},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":138,"to":324},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":194,"to":326},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":214,"to":328},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":175,"to":330},"\u002Fexamples\u002Fscreens\u002Fform",{"label":151,"to":332},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":275,"to":334},"\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":282,"to":336},"\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":254,"to":338},"\u002Fexamples\u002Fscreens\u002Floading",{"label":143,"to":340},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":55,"to":342},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":79,"to":344},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":346,"to":347},"GraphCDN marketing pages","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fmarketing",{"label":349,"to":350},"GraphCDN user flows","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fflows",{"label":352,"to":353},"GraphCDN UI components","\u002Fexamples\u002Fapps\u002Fgraphcdn\u002Fcomponents",{"label":355,"to":356},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":358,"to":359},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":361,"to":18},"All SaaS app examples",{"label":363,"to":364,"description":365},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":367,"to":368,"description":369},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":371,"to":372,"description":373},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":375,"to":376,"description":377},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":379,"updated_at":380},"2022-04-10T17:35:58.000Z","2026-09-13T13:02:39.000Z"]