Not a chatbot, an answer engine
Perplexity doesn’t look like ChatGPT. There’s a big bold question at the top, a row of source cards underneath, then the answer with little numbered chips woven into the sentences. The layout is built to look like research, not chat. This tool recreates that exact structure on a canvas.
You get a question, editable source cards, and an answer body where markers like [1] and [2] turn into real citation chips.
Building the answer page
Start with the question. It renders as the large bold headline and wraps across as many lines as it needs.
Then the sources. Each card carries a domain, a title snippet, a colored favicon dot, and an index number, and you can add, edit, or delete them freely. Two to four cards is the sweet spot. That’s what a real Perplexity answer usually shows above the fold.
The answer itself is where citations live. Type a marker like [1] anywhere in the text and it renders as a small rounded chip, exactly like Perplexity’s inline references. Each new line starts a fresh paragraph. There’s a toggle to hide every chip at once if you’d rather show a clean answer.
Why fake a Perplexity answer
GEO reports, for one. Pitching a client on generative engine optimization? Showing their brand appearing inside a Perplexity answer beats a paragraph explaining the concept. You mock it up, drop it in the deck, done.
Tutorial writers use it to illustrate how AI search cites sources, without screenshotting live results that shift every hour. UX teams prototype answer-engine layouts before building them. And researchers teaching source evaluation build example answers where they control exactly which citation lands where.
Getting it convincing
Match your citation numbers to your source count. Four cards means your markers should stay within [1] through [4], otherwise a sharp-eyed viewer spots the [7] pointing at nothing.
Use real, recognizable domains. nasa.gov and wikipedia.org sell the source row instantly. randomsite123.net doesn’t. Write the answer the way Perplexity does, too: neutral, structured, factual, two or three tight paragraphs instead of one rambling block. Front-load the important words in each source title, since cards truncate to two lines.
Dark mode matches most shared screenshots. Light mode reproduces better on paper.
FAQ
How do the citation chips work?
Type [1], [2], [3] in the answer text and each one renders as a small rounded chip inline. Toggle “Inline Citations” off to hide them all without deleting anything.
How many sources should I show?
Three or four looks the most authentic. That’s the range Perplexity typically surfaces at the top of an answer, and the cards lay out neatly across one row.
Is any of this sent to a server?
No. The whole answer page is drawn in your browser with canvas. Your question, sources, and answer text stay on your device.
Can I switch to light mode?
Yeah. Untick Dark Mode for Perplexity’s warm off-white theme. Both themes use the app’s real background and card colors.
What resolution do I get?
The design is 600 pixels wide and exports at 2x, so about 1200 pixels across. Sharp on retina displays and clean in print.
Are the favicon dots real logos?
They’re colored dots derived from each domain name, not fetched logos. That keeps everything offline and avoids loading third-party images, while still giving each source a distinct marker.