--- import Code from './Code.astro'; const key = Object.keys(Astro.props)[0]; const value = Astro.props[key]; --- <div class="astro-debug"> <div class="astro-debug-header"> <h2 class="astro-debug-title"> <span class="astro-debug-label">Debug</span> <span class="astro-debug-name">"{key}"</span> </h2> </div> <Code code={JSON.stringify(value, null, 2)} /> </div> <style is:inline> .astro-debug { font-size: 14px; padding: 1rem 1.5rem; background: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .astro-debug-header, pre.astro-code { margin: -1rem -1.5rem 1rem; padding: 0.25rem 0.75rem; } .astro-debug-header { background: #ff1639; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .astro-debug-title { font-size: 1em; color: white; margin: 0.5em 0; } .astro-debug-label { font-weight: bold; text-transform: uppercase; margin-right: 0.75em; } pre.astro-code { border: 1px solid #eee; padding: 1rem 0.75rem; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; font-size: 14px; } </style>