Code Screenshot

Render one per snippet from your docs or changelog build, with the code, language, file name and author.

Image, 1080 × 1080, 1 credit

Output

Code Screenshot, rendered by oJo with its first sample

Variables

  • authortext
    Mike Brown
  • backgroundColorstext
    ["#1a365d","#3b82f6"]
  • codetext
    'use client'; import { MoonIcon, SunIcon } from '@radix-ui/react-icons'; import { useTheme } from 'next-themes'; import { Button } from '@/components/ui/button'; export function ThemeToggle() { const { theme, setTheme } = useTheme(); const handleThemeToggle = () => { setTheme(theme === 'dark' ? 'light' : 'dark'); }; return ( <Button variant='ghost' size='icon' onClick={handleThemeToggle}> <SunIcon className='h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' /> <MoonIcon className='absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' /> <span className='sr-only'>Toggle theme</span> </Button> ); }
  • filenametext
    example.js
  • languagetext
    Javascript
  • timestamptext
    2024-11-10

Send any of these in modify. Anything you leave out prints the sample value, and the response lists it in warnings.

Render it

Save the template to your account first. Saving gives you its ID.

curl --request POST \
  --url https://api.ojo.so/v1/image/template \
  --header 'Authorization: Bearer <your API key>' \
  --header 'Content-Type: application/json' \
  --data '{
  "templateId": "<YOUR_TEMPLATE_ID>",
  "modify": {
    "filename": "example.js",
    "language": "Javascript",
    "code": "'\''use client'\'';\n\nimport { MoonIcon, SunIcon } from '\''@radix-ui/react-icons'\'';\nimport { useTheme } from '\''next-themes'\'';\n\nimport { Button } from '\''@/components/ui/button'\'';\n\nexport function ThemeToggle() {\n  const { theme, setTheme } = useTheme();\n\n  const handleThemeToggle = () => {\n    setTheme(theme === '\''dark'\'' ? '\''light'\'' : '\''dark'\'');\n  };\n\n  return (\n    <Button variant='\''ghost'\'' size='\''icon'\'' onClick={handleThemeToggle}>\n      <SunIcon className='\''h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0'\'' />\n      <MoonIcon className='\''absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'\'' />\n      <span className='\''sr-only'\''>Toggle theme</span>\n    </Button>\n  );\n}",
    "timestamp": "2024-11-10"
  },
  "viewportWidth": 1080,
  "viewportHeight": 1080
}'

What's included

Related templates

All templates
Code Screenshot - oJo