The code runner for PHP 💫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>The code runner for PHP 💫 - Tinkerwell</title> <meta name="description" content="Quickly iterate on PHP code within the context of your web application with Tinkerwell – the must-have companion for your favorite IDE."> <link rel="canonical" href="https://tinkerwell.app/"/> <meta property="og:title" content="The code runner for PHP 💫" /> <meta property="og:description" content="Quickly iterate on PHP code within the context of your web application with Tinkerwell – the must-have companion for your favorite IDE." /> <meta property="og:site_name" content="Tinkerwell" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@tinkerwell" /> <meta name="twitter:creator" content="@tinkerwell" /> <meta name="twitter:image" content="https://tinkerwell.app/images/card-v4-1.png" /> <meta name="twitter:title" content="The code runner for PHP 💫" /> <meta name="twitter:description" content="Quickly iterate on PHP code within the context of your web application with Tinkerwell – the must-have companion for your favorite IDE." /> <link rel="stylesheet" href="/css/app.css?id=68b94df91f1432a45db149783227b2b9"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <meta name="ahrefs-site-verification" content="5179741a52de628b7ade6c395de9c4628ac58317be69b8ed0cd7cbc5c696211b"> <script src="https://cdn.usefathom.com/script.js" data-site="IQHPVVUU" defer></script> <script async src="https://cdn.tolt.io/tolt.js" data-tolt="e6ecfc8f-e39a-43b0-b581-4d4448071589"></script> </head> <body class="font-sans bg-silver-900"> <div class="w-full bg-lemon-500 text-lemon-900 p-4 text-center font-bold"> Tinkerwell 4 is out now! <a href="/whats-new-in-tinkerwell-4" class="underline">See what's new</a> or <a href="/#pricing" class="underline">buy now</a>. </div> <div class="absolute w-full"> <img class="hidden w-full md:block" src="/images/hero-background.png" alt="Tinkerwell background image"> <img class="block w-full md:hidden" src="/images/hero-background-mobile.png" alt="Tinkerwell background image"> </div> <div class="absolute w-full overflow-hidden"> <div id="stars" class="w-full" style="height: 700px;"></div> <span class="pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[135deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]" style="top: 500px; left: 250px; animation-delay: 1.842674s; animation-duration: 5s;"> <div class="pointer-events-none absolute top-1/2 -z-10 h-[1px] w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"></div> </span> <span class="pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[135deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]" style="top: 470px; left: 450px; animation-delay: 1.842674s; animation-duration: 3s;"> <div class="pointer-events-none absolute top-1/2 -z-10 h-[1px] w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"></div> </span> <span class="pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[135deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]" style="top: 470px; left: 1350px; animation-delay: 1.842674s; animation-duration: 4s;"> <div class="pointer-events-none absolute top-1/2 -z-10 h-[1px] w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"></div> </span> <span class="pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[135deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]" style="top: 400px; left: 1550px; animation-delay: 3.842674s; animation-duration: 4s;"> <div class="pointer-events-none absolute top-1/2 -z-10 h-[1px] w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"></div> </span> </div> <div class="relative z-10 px-0 mx-auto text-white max-w-8xl md:px-8 xl:px-28"> <header class="items-center justify-between pt-5 flex"> <a href="/" class="flex items-center px-4 lg:px-0 lg:justify-center"> <img class="h-10" src="/images/tinkerwell_logo.png" alt="Tinkerwell Logo"> <span style="letter-spacing: 2px" class="pl-3 font-mono text-base">Tinkerwell</span> </a> <nav class="flex justify-center space-x-4 px-4 md:px-0 md:pt-0 pt-6 text-sm hidden md:block"> <a href="/reviews" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Reviews</a> <a href="/#features" class="lg:inline-block px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Features</a> <a href="/docs/4/getting-started/about" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Docs</a> <a href="/changelog" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Changelog</a> <a href="/blog" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Blog</a> <a href="/renew" class="hidden lg:inline-block px-4 py-2 text-center text-white transition duration-300 ease-in-out md:bg-white rounded-lg md:shadow-sm hover:lowOpacityShadow md:bg-opacity-20 hover:bg-opacity-50 focus:outline-none active:bg-opacity-20 active:shadow-none active:text-opacity-70"> Renew existing license </a> </nav> <nav x-data="{ show: false }" x-cloak class="md:hidden"> <button x-on:click="show = true" aria-label="Open menu"> <svg aria-hidden="true" class="mr-4 h-4 w-4 overflow-visible stroke-current" fill="none" stroke-width="2" stroke-linecap="round"><path d="M0 1H14M0 7H14M0 13H14" class="origin-center transition"></path><path d="M2 2L12 12M12 2L2 12" class="origin-center transition scale-90 opacity-0"></path></svg> </button> <div class="relative z-50" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"> <div class="fixed inset-0" x-show="show"></div> <div class="fixed inset-0 overflow-hidden" x-show="show"> <div class="absolute inset-0 overflow-hidden"> <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"> <div class="pointer-events-auto w-screen max-w-md" x-show="show" x-transition:enter="transform transition ease-in-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"> <div class="flex h-full flex-col overflow-y-scroll bg-purple-900 py-6 shadow-xl"> <div class="px-4 sm:px-6"> <div class="flex items-start justify-end"> <div class="ml-3 flex h-7 items-center"> <button x-on:click="show = false" type="button" class="text-silver-100 hover:text-silver-400"> <span class="sr-only">Close panel</span>  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> <div class="relative mt-6 flex-1 px-4 sm:px-6"> <div class="grid grid-cols-1 gap-4"> <a href="/reviews" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Reviews</a> <a href="/#features" class="lg:inline-block px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Features</a> <a href="/docs/4/getting-started/about" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Docs</a> <a href="/changelog" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Changelog</a> <a href="/blog" class="px-4 py-2 transition duration-150 ease-in-out bg-white bg-opacity-0 hover:bg-opacity-10 rounded-3xl ">Blog</a> </div> </div> </div> </div> </div> </div> </div> </div> </nav> </header> <div class="mt-12 md:mt-20"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script> <main class="w-full mx-auto "> <section class="px-8 mx-auto md:px-0 lg:max-w-5xl md:text-center"> <a href="https://tinkerwell.app/whats-new-in-tinkerwell-4" class="border rounded-full inline-flex items-center justify-center mx-auto px-4"> <span class="rounded-full bg-lemon-500 p-1 mr-2"></span>See what's new in Tinkerwell 4 </a> <h1 style="background: linear-gradient(180deg,#fff 22.5%,rgba(255,255,255,.7) 100%);-webkit-background-clip: text; background-clip: text" class="text-transparent my-3 text-4xl font-bold leading-10 md:text-6xl font-display">The PHP Scratchpad</h1> <p class="leading-7 text-purple-400 text-baseSmall md:text-basePlus max-w-4xl mx-auto"> Enjoy coding and debugging in an editor designed for fast feedback and quick iterations. It's like a shell for your application – but with multi-line editing, code completion, and more. </p> </section> <div class="flex justify-center w-full mx-auto mt-10 md:mt-16 md:w-11/12" id="intro"> <div class="mx-4 overflow-hidden rounded-lg shadow-xl md:mx-0" style="-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"> <div x-data="{ outputMode: 'detailDive', showSQL: true, tooltip: '', }" @click="tooltip = ''" @click.away="tooltip = ''" class="group rounded-2xl border border-theme-border bg-white/10 p-2"> <div class="rounded-lg border border-theme-border bg-theme-bg cursor-default"> <div class="flex justify-between items-center flex-1 w-full border-b border-theme-border"> <div style="height: 40px" class="flex space-x-2 items-center pl-2"> <div class="h-3 w-3 rounded-full bg-red-500"></div> <div class="h-3 w-3 rounded-full bg-yellow-500"></div> <div class="h-3 w-3 rounded-full bg-green-500"></div> </div> <div class="flex items-center justify-center space-x-2"> <span>Tinkerwell</span> <span class="hidden md:block"> - SSH – beyondco.de</span> <div class="hidden md:block bg-red-500 h-4 w-4 rounded-full"></div> </div> <div class="tinkerwell-toolbar-buttons flex space-x-2 items-center justify-center pr-4"> <div @click="showSQL = !showSQL" :class="{'invisible': outputMode !== 'detailDive'}" class="relative rounded p-1 hover:bg-theme-alternate text-sm tracking-tight text-theme-text has-tooltip" > <span :class="{'text-theme-primary-background': showSQL, 'text-theme-text': !showSQL}" class="select-none" >SQL</span> <div aria-label="tooltip sql" @click="tooltip = 'sql'" @mouseover="tooltip = 'sql'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'sql'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -left-16 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Watch the SQL queries that are executed in the background </div> </template> </div> </div> <div @click="outputMode = 'detailDive'" class="rounded p-1 hover:bg-theme-alternate has-tooltip" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" :class="{ 'text-theme-primary-background': outputMode === 'detailDive', 'text-theme-text': outputMode !== 'detailDive' }" class="w-6 h-6 h-4 w-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"></path> </svg> </div> <div @click="outputMode = 'cli'" class="rounded p-1 hover:bg-theme-alternate has-tooltip" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" :class="{ 'text-theme-primary-background': outputMode === 'cli', 'text-theme-text': outputMode !== 'cli' }" stroke="currentColor" class="h-7 w-7"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"></path> </svg> </div> </div> </div> <div class="flex relative"> <div style="width: 50px" class="border-r border-theme-border flex flex-col space-y-6 items-center pt-2 px-2"> <div class="relative"> <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> </svg> <div aria-label="tooltip run" @click="tooltip = 'run'" @mouseover="tooltip = 'run'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'run'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate any code in your application </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" /> </svg> <div aria-label="tooltip folder" @click="tooltip = 'folder'" @mouseover="tooltip = 'folder'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'folder'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Open local projects </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" /> </svg> <div aria-label="tooltip ssh" @click="tooltip = 'ssh'" @mouseover="tooltip = 'ssh'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'ssh'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Connect to remote servers via SSH </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g id="Docker"> <g data-name="<Group>" id="_Group_"> <circle cx="5.04" cy="16" data-name="<Path>" id="_Path_" r="0.5" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_" style="stroke-linecap: round; stroke-linejoin: round" stroke="currentColor" fill="none" width="3" x="1.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_2" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="4.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_3" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="7.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_4" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_5" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="4.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_6" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="7.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_7" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_8" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="3.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_9" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="13.5" y="9.5" /> <path d="M23.5,11.5s-1.75-1.12-3-.5A3.45,3.45,0,0,0,19,8.5a3.64,3.64,0,0,0-.58,2.88,1,1,0,0,1-1,1.12H.5c0,6.25,3.83,8,7.5,8a13.76,13.76,0,0,0,12.06-7A4.68,4.68,0,0,0,23.5,11.5Z" data-name="<Path>" id="_Path_2" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" /> </g> </g> </svg> <div aria-label="tooltip docker" @click="tooltip = 'docker'" @mouseover="tooltip = 'docker'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'docker'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate code in your Docker containers </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 -ml-0.5 my-2"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.345 9h10.55L9.618 20 4.345 9zm21.099 0h10.55l-5.276 11-5.274-11z" fill="currentColor" fill-opacity=".1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.62 20h10.549l-5.275 11L9.62 20z" fill="currentColor" fill-opacity=".22"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.169 20h10.55l-5.275 11-5.275-11z" fill="currentColor" fill-opacity=".2"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.169 20H9.619l5.275-11 5.275 11z" fill="currentColor" fill-opacity=".4"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M30.718 20h-10.55l5.276-11 5.274 11z" fill="currentColor" fill-opacity=".4"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.444 31h-10.55l5.275-11 5.275 11z" fill="currentColor" fill-opacity=".5"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.494 8.467A1 1 0 0 1 4.34 8h10.55a1 1 0 0 1 .902.568l4.373 9.12 4.373-9.12A1 1 0 0 1 25.44 8h10.55a1 1 0 0 1 .902 1.432L26.345 31.424a1.001 1.001 0 0 1-.905.576H14.89a1 1 0 0 1-.902-.568l-10.55-22a1 1 0 0 1 .056-.965zm21.95 2.846L29.13 19h-7.372l3.686-7.687zM5.934 10l3.686 7.687L13.306 10H5.933zm8.96 1.313L18.58 19h-7.372l3.686-7.687zM27.032 10l3.686 7.687L34.405 10h-7.373zm-1.588 18.687L21.758 21h7.372l-3.686 7.687zM23.855 30l-3.686-7.687L16.483 30h7.372zm-8.96-1.313L11.207 21h7.372l-3.686 7.687z" fill="currentColor"></path> </svg> <div aria-label="tooltip vapor" @click="tooltip = 'vapor'" @mouseover="tooltip = 'vapor'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'vapor'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate code in your Vapor environments </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <div aria-label="tooltip history" @click="tooltip = 'history'" @mouseover="tooltip = 'history'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'history'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Easy access to the history of your code executions </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /> </svg> <div aria-label="tooltip snippets" @click="tooltip = 'snippets'" @mouseover="tooltip = 'snippets'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'snippets'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Save and reuse code snippets in your projects </div> </template> </div> </div> </div> <div class="flex-1 font-ide flex editor" style="max-height: 600px"> <div class="flex flex-col space-y-4 p-3 text-gray-600"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> </div> <div class="grid grid-cols-1 lg:grid-cols-2 "> <div> <div> <pre id="typewriter_0-comment" class="pt-1 text-white overflow-hidden ide" style="width: 1000px; line-height: 2.5em"> <span class="comment">// Get a user from your database</span> </pre> <pre id="typewriter_0" class="text-white overflow-hidden ide hideafter" style="width: 1000px; line-height: 2.5em"> <span class="variable">$user</span> = <span class="class">User</span>::<span class="method">find</span>(</span><span class="parameter">42</span>)</span>;</span> </pre> <pre id="typewriter_1-comment" class="text-white overflow-hidden ide hideafter" style="width: 1000px; line-height: 2.5em"> <span class="comment">// Add Tinkerwell to the user's apps</span> </pre> <pre id="typewriter_1" class="text-white overflow-hidden ide hideafter" style="width: 1000px; line-height: 2.5em"> <span class="variable">$wasAdded</span> = <span class="variable">$user</span>-><span class="method">attachApp</span>(<span class="class">Tinkerwell</span>::<span class="static-method">class</span>); </pre> <pre id="typewriter_2-comment" class="text-white overflow-hidden ide hideafter" style="width: 1000px; line-height: 2.5em"> <span class="comment">// Send welcome email</span> </pre> <pre id="typewriter_2" class="text-white overflow-hidden ide hideafter" style="width: 1000px; line-height: 2.5em"> <span class="class">Mail</span>::<span class="method">to</span>(<span class="variable">$user</span>-><span class="property">email</span>) -><span class="method">send</span>(<span class="keyword">new</span> <span class="class">WelcomeEmail</span>());</span> </pre> </div> </div> <div class=" md:ml-0 lg:col-span-1 lg:border-t-0 lg:border-l border-t border-theme-border overflow-y-scroll -ml-8 bg-theme-bg"> <div x-show="outputMode == 'detailDive'"> <div class="p-4"> <div class="detail-dive-output-2"> <div class="mb-2 rounded border border-theme-border bg-blend-alternate bg-opacity-20 relative text-theme-text font-theme p-4 shadow transition-all duration-300 ease-in-out overflow-hidden" style="max-height: 10000rem;"> <div class="flex flex-col items-end absolute top-4 right-3 z-20"> <div class="hidden md:block text-sm text-theme-text opacity-75 hover:opacity-100 transition duration-150 flex justify-end w-full mb-1"> <span class="pr-2">Line 9</span></div> <div class="bg-theme-bg text-theme-text rounded-lg flex items-center justify-center space-x-1"> <div class="hover:bg-theme-alternate hover:bg-opacity-10 rounded h-9 flex items-center justify-center relative" onclick="document.getElementById('mailPreviewModal').__x.$data.show = true;return false;" style="aspect-ratio: 1 / 1;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> <div aria-label="tooltip html-preview" @click="tooltip = 'html-preview'" @mouseover="tooltip = 'html-preview'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'html-preview'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 z-50 -mt-14 right-14 top-full w-64 pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Get an HTML preview of Mailables, views and more </div> </template> </div> </div> </div> </div> <div class="overflow-x-auto" style="user-select: text;"><pre class="sf-dump" id="sf-dump-302686374" data-indent-pad=" " tabindex="0"><div class="sf-dump-search-wrapper sf-dump-search-hidden"> </div><span class="sf-dump-note" style="cursor: pointer;">Illuminate\Mail\SentMessage</span> {<a class="sf-dump-ref sf-dump-toggle" title="[Cmd+click] Expand all children">#4128 <span>▶</span></a><samp data-depth="1" class="sf-dump-compact"> #<span class="sf-dump-protected" title="Protected property">sentMessage</span>: <span class="sf-dump-note" title="Symfony\Component\Mailer\SentMessage " style="cursor: pointer;"><span class="sf-dump-ellipsis sf-dump-ellipsis-note" style="cursor: pointer;">Symfony\Component\Mailer</span><span class="sf-dump-ellipsis sf-dump-ellipsis-note">\</span>SentMessage</span> {<a class="sf-dump-ref sf-dump-toggle" title="[Cmd+click] Expand all children">#4152 <span>▶</span></a> } </samp>} </pre> </div> </div> </div> <div class="detail-dive-output-1"> <div x-show="showSQL" class="mb-2 rounded border border-theme-border bg-blend-alternate bg-opacity-20 relative text-theme-text font-theme p-4 shadow transition-all duration-300 ease-in-out overflow-hidden" style="max-height: 10000rem;"> <div class="overflow-x-auto" style="user-select: text;"> INSERT INTO `user_apps` ( `user_id`, `app_id` ) VALUES ( 42, 1 ) </div> </div> <div class="mb-2 rounded border border-theme-border bg-blend-alternate bg-opacity-20 relative text-theme-text font-theme p-4 shadow transition-all duration-300 ease-in-out overflow-hidden" style="max-height: 10000rem;"> <div class="flex flex-col items-end absolute top-4 right-3 z-20"> <div class="hidden md:block text-sm text-theme-text opacity-75 hover:opacity-100 transition duration-150 flex justify-end w-full mb-1"> <span class="pr-2">Line 5</span> </div> </div> <div class="overflow-x-auto" style="user-select: text;"> true </div> </div> </div> <div class="detail-dive-output-0"> <div x-show="showSQL" class="rounded border border-theme-border bg-blend-alternate bg-opacity-20 relative text-theme-text font-theme p-4 shadow transition-all duration-300 ease-in-out overflow-hidden" style="max-height: 10000rem;"> <div class="overflow-x-auto" style="user-select: text;"> SELECT * FROM `users` WHERE `id` = 42 </div> </div> <div class="mt-2 relative rounded border border-theme-border bg-blend-alternate bg-opacity-20 relative text-theme-text font-theme p-4 shadow transition-all duration-300 ease-in-out overflow-hidden" style="max-height: 10000rem;"> <div class="flex flex-col items-end absolute top-4 right-3 z-20"> <div class="hidden md:block text-sm text-theme-text opacity-75 hover:opacity-100 transition duration-150 flex justify-end w-full mb-1"> <span class="pr-2">Line 2</span></div> <div class="bg-theme-bg text-theme-text rounded-lg flex items-center justify-center space-x-1"> </div> </div> <div class="overflow-x-auto" style="user-select: text;"> <pre class=sf-dump id=sf-dump-1688767905 data-indent-pad=" "><span class=sf-dump-note>App\Models\User</span> {<a class=sf-dump-ref>#3846</a><samp data-depth=1 class=sf-dump-expanded> <span class=sf-dump-meta>id</span>: <span class=sf-dump-num>42</span> <span class=sf-dump-meta>name</span>: "<span class=sf-dump-str title="13 characters">Marcel Pociot</span>" <span class=sf-dump-meta>email</span>: "<span class=sf-dump-str title="18 characters"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a373b28393f361a383f2335343e3935743e3f">[email protected]</a></span>" <span class=sf-dump-meta>provider_id</span>: "<span class=sf-dump-str title="6 characters">804684</span>" <span class=sf-dump-meta>provider_token</span>: "<span class=sf-dump-str title="40 characters">ghu_zgN5qayX1!wYA2xoAD4JZm43QI9MvqR04Tf8d</span>" <span class=sf-dump-meta>provider_refresh_token</span>: <span class=sf-dump-const>null</span> <span class=sf-dump-meta>created_at</span>: "<span class=sf-dump-str title="19 characters">2023-09-01 11:45:12</span>" <span class=sf-dump-meta>updated_at</span>: "<span class=sf-dump-str title="19 characters">2023-09-11 13:24:19</span>" <span class=sf-dump-meta>current_installation_id</span>: <span class=sf-dump-const>null</span> <span class=sf-dump-meta>username</span>: "<span class=sf-dump-str title="7 characters">mpociot</span>" <span class=sf-dump-meta>avatar</span>: "<span class=sf-dump-str title="50 characters">https://avatars.githubusercontent.com/u/804684?v=4</span>" <span class=sf-dump-meta>current_account_id</span>: <span class=sf-dump-num>56</span> <span class=sf-dump-meta>provider</span>: "<span class=sf-dump-str title="6 characters">github</span>" <span class=sf-dump-meta>account_reminder_sent_at</span>: <span class=sf-dump-const>null</span> <span class=sf-dump-meta>provider_http_token</span>: <span class=sf-dump-const>null</span> <span class=sf-dump-meta>provider_url</span>: <span class=sf-dump-const>null</span> </samp>} </pre> </div> <div aria-label="tooltip detail-dive-card" @click="tooltip = 'detail-dive-card'" @mouseover="tooltip = 'detail-dive-card'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'detail-dive-card'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 z-50 mt-16 ml-16 left-0 top-0 w-64 pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Easily inspect your code output with individual cards </div> </template> </div> </div> </div> </div> </div> <div x-show="outputMode == 'cli'"> <div class="flex-1 font-ide flex overflow-hidden"> <div class="flex flex-col space-y-4 p-3 text-gray-600"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> <span>21</span> <span>22</span> <span>23</span> <span>24</span> <span>25</span> <span>26</span> <span>27</span> <span>28</span> <span>29</span> <span>30</span> <span>31</span> <span>32</span> <span>33</span> <span>34</span> <span>35</span> <span>36</span> <span>37</span> <span>38</span> <span>39</span> <span>40</span> <span>41</span> <span>42</span> <span>43</span> <span>44</span> <span>45</span> <span>46</span> <span>47</span> <span>48</span> <span>49</span> <span>50</span> <span>51</span> <span>52</span> <span>53</span> <span>54</span> <span>55</span> <span>56</span> <span>57</span> <span>58</span> <span>59</span> <span>60</span> <span>61</span> <span>62</span> <span>63</span> <span>64</span> <span>65</span> <span>66</span> <span>67</span> <span>68</span> <span>69</span> <span>70</span> <span>71</span> <span>72</span> <span>73</span> <span>74</span> <span>75</span> <span>76</span> <span>77</span> <span>78</span> <span>79</span> <span>80</span> <span>81</span> <span>82</span> <span>83</span> <span>84</span> <span>85</span> <span>86</span> <span>87</span> <span>88</span> <span>89</span> <span>90</span> <span>91</span> <span>92</span> <span>93</span> <span>94</span> <span>95</span> <span>96</span> <span>97</span> <span>98</span> <span>99</span> <span>100</span> </div> <pre style="line-height: 2.6em">[!] Aliasing 'User' to 'App\User' for this Tinker session. App\User {#4076 #connection: "mysql" #table: "users" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] +preventsLazyLoading: false #perPage: 15 +exists: true +wasRecentlyCreated: false #escapeWhenCastingToString: false #attributes: array:21 [ "id" => 49 "name" => "Marcel" "email" => "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681c091104071a2804091a091e0d04460b0705">[email protected]</a>" "password" => "$2y$10$7UxZSEfJtplRlH.e7eMUDe8WGuwrmrhZhP9WhGO.c.H7g14tqDOGm" "quaderno_id" => "" "remember_token" => null "created_at" => "2023-06-08 09:16:07" "updated_at" => "2023-09-29 11:36:42" "package" => "premium" "paddle_id" => null "confirmed_at" => "2023-06-08 09:16:20" "confirmation_code" => null "public" => 0 "twitter" => null "github" => null "web" => null "bio" => null "github_id" => null "last_login_at" => "2023-06-08 09:16:34" "educational_email" => null "educational_email_last_verified_at" => null ] #original: array:21 [ "id" => 49 "name" => "Marcel" "email" => "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b4a1b9acafb280aca1b2a1b6a5aceea3afad">[email protected]</a>" "password" => "$2y$10$7UxZSEfJtplRlH.e7eMUDe8WGuwrmrhZhP9WhGO.c.H7g14tqDOGm" "quaderno_id" => "" "remember_token" => null "created_at" => "2023-06-08 09:16:07" "updated_at" => "2023-09-29 11:36:42" "package" => "premium" "paddle_id" => null "confirmed_at" => "2023-06-08 09:16:20" "confirmation_code" => null "public" => 0 "twitter" => null "github" => null "web" => null "bio" => null "github_id" => null "last_login_at" => "2023-06-08 09:16:34" "educational_email" => null "educational_email_last_verified_at" => null ] #changes: [] #casts: array:2 [ "last_login_at" => "datetime" "educational_email_last_verified_at" => "datetime" ] #classCastCache: [] #attributeCastCache: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] +timestamps: true +usesUniqueIds: false #hidden: array:2 [ 0 => "password" 1 => "remember_token" ] #visible: [] #fillable: array:17 [ 0 => "name" 1 => "email" 2 => "password" 3 => "quaderno_id" 4 => "package" 5 => "paddle_id" 6 => "confirmed_at" 7 => "github" 8 => "github_id" 9 => "twitter" 10 => "web" 11 => "bio" 12 => "public" 13 => "last_login_at" 14 => "onboarding_disabled" 15 => "educational_email" 16 => "educational_email_last_verified_at" ] #guarded: array:1 [ 0 => "*" ] #rememberTokenName: "remember_token" } </pre> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <section class="mt-8 md:text-center md:mt-28"> <div class="px-8 mx-auto md:px-0 "> <h2 class="mb-4 text-3xl font-bold leading-9 md:text-4xl md:leading-10">Framework wonders</h2> <p class="leading-6 md:leading-8 text-baseSmall md:text-basePlus text-silver-700"> Tinkerwell ships with drivers for all major frameworks and is extendable to support any PHP application. </p> </div> <div class="grid items-center justify-between w-full grid-cols-2 px-8 md:grid-cols-3 gap-y-8 justify-items-stretch md:px-0 xl:flex mt-14"> <a href="/tinkerwell-for-laravel"> <img class="h-8" alt="Laravel logo" src="images/frameworks/laravel.svg"> </a> <a href="/tinkerwell-for-symfony"> <img class="h-8" alt="Symfony logo" src="images/frameworks/symfony.svg"> </a> <a href="/tinkerwell-for-statamic"> <img class="h-8" alt="Statamic logo" src="images/frameworks/statamic.svg"> </a> <a href="/tinkerwell-for-wordpress"> <img class="h-12" alt="Wordpress logo" src="images/frameworks/wordpress.svg"> </a> <a href="/tinkerwell-for-magento"> <img class="h-8" alt="Magento logo" src="images/frameworks/magento.svg"> </a> <a href="/getting-started"> <img class="h-8" alt="PHP logo" src="images/frameworks/php.svg"> </a> </div> </section> <section style="background-image: linear-gradient(107.56deg,#1d224d 2.2%,#720080 29.17%,#16191d 95.31%)" class="relative w-full mt-20 overflow-hidden md:rounded-xl border border-white/5"> <div id="stars-2" data-options='{ "number": { "value": 30 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' class="hidden md:block absolute w-full h-full"></div> <div class="relative pt-12 lg:pt-20 lg:pl-16 grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="px-8 lg:px-0 "> <h3 class="mb-5 text-2xl font-bold leading-9 text-white md:text-3xl font-display "> The fastest feedback loop in a code editor </h3> <p class="lg:pb-10 leading-6 mb:leading-8 text-purple-300 lg:mb-8 text-baseSmall md:text-basePlus lg:pb-0"> Prototype functions and controller methods without leaving the editor. Provide request context, implement the logic and craft the response before you even hit the browser. Switch to your IDE to set up routes and views, and you're done.<br><br>The perfect IDE companion for Laravel developers – with plenty of options for other frameworks. </p> </div> <div class="block pl-8 md:pl-0"> <div class="rounded-2xl border border-theme-border bg-white/10 rounded-b-none border-b-0 rounded-r-none pt-2 pl-2"> <div class="rounded-lg rounded-b-none border-b-0 rounded-r-none border border-theme-border bg-theme-bg"> <div class="flex justify-between items-center flex-1 w-full border-b border-theme-border"> <div style="height: 40px" class="flex space-x-2 items-center pl-2"> <div class="h-3 w-3 rounded-full bg-red-500"></div> <div class="h-3 w-3 rounded-full bg-yellow-500"></div> <div class="h-3 w-3 rounded-full bg-green-500"></div> </div> </div> <div class="flex relative"> <div style="width: 50px" class="border-r border-theme-border flex flex-col space-y-6 items-center pt-2 px-2"> <div class="relative"> <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> </svg> <div aria-label="tooltip run" @click="tooltip = 'run'" @mouseover="tooltip = 'run'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'run'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate any code in your application </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" /> </svg> <div aria-label="tooltip folder" @click="tooltip = 'folder'" @mouseover="tooltip = 'folder'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'folder'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Open local projects </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" /> </svg> <div aria-label="tooltip ssh" @click="tooltip = 'ssh'" @mouseover="tooltip = 'ssh'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'ssh'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Connect to remote servers via SSH </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g id="Docker"> <g data-name="<Group>" id="_Group_"> <circle cx="5.04" cy="16" data-name="<Path>" id="_Path_" r="0.5" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_" style="stroke-linecap: round; stroke-linejoin: round" stroke="currentColor" fill="none" width="3" x="1.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_2" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="4.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_3" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="7.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_4" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="9.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_5" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="4.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_6" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="7.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_7" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="6.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_8" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="10.5" y="3.5" /> <rect data-name="<Rectangle>" height="3" id="_Rectangle_9" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" width="3" x="13.5" y="9.5" /> <path d="M23.5,11.5s-1.75-1.12-3-.5A3.45,3.45,0,0,0,19,8.5a3.64,3.64,0,0,0-.58,2.88,1,1,0,0,1-1,1.12H.5c0,6.25,3.83,8,7.5,8a13.76,13.76,0,0,0,12.06-7A4.68,4.68,0,0,0,23.5,11.5Z" data-name="<Path>" id="_Path_2" stroke="currentColor" fill="none" style="stroke-linecap: round; stroke-linejoin: round" /> </g> </g> </svg> <div aria-label="tooltip docker" @click="tooltip = 'docker'" @mouseover="tooltip = 'docker'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'docker'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate code in your Docker containers </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 -ml-0.5 my-2"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.345 9h10.55L9.618 20 4.345 9zm21.099 0h10.55l-5.276 11-5.274-11z" fill="currentColor" fill-opacity=".1"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.62 20h10.549l-5.275 11L9.62 20z" fill="currentColor" fill-opacity=".22"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.169 20h10.55l-5.275 11-5.275-11z" fill="currentColor" fill-opacity=".2"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.169 20H9.619l5.275-11 5.275 11z" fill="currentColor" fill-opacity=".4"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M30.718 20h-10.55l5.276-11 5.274 11z" fill="currentColor" fill-opacity=".4"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.444 31h-10.55l5.275-11 5.275 11z" fill="currentColor" fill-opacity=".5"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.494 8.467A1 1 0 0 1 4.34 8h10.55a1 1 0 0 1 .902.568l4.373 9.12 4.373-9.12A1 1 0 0 1 25.44 8h10.55a1 1 0 0 1 .902 1.432L26.345 31.424a1.001 1.001 0 0 1-.905.576H14.89a1 1 0 0 1-.902-.568l-10.55-22a1 1 0 0 1 .056-.965zm21.95 2.846L29.13 19h-7.372l3.686-7.687zM5.934 10l3.686 7.687L13.306 10H5.933zm8.96 1.313L18.58 19h-7.372l3.686-7.687zM27.032 10l3.686 7.687L34.405 10h-7.373zm-1.588 18.687L21.758 21h7.372l-3.686 7.687zM23.855 30l-3.686-7.687L16.483 30h7.372zm-8.96-1.313L11.207 21h7.372l-3.686 7.687z" fill="currentColor"></path> </svg> <div aria-label="tooltip vapor" @click="tooltip = 'vapor'" @mouseover="tooltip = 'vapor'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'vapor'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Evaluate code in your Vapor environments </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <div aria-label="tooltip history" @click="tooltip = 'history'" @mouseover="tooltip = 'history'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'history'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Easy access to the history of your code executions </div> </template> </div> </div> <div class="relative"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /> </svg> <div aria-label="tooltip snippets" @click="tooltip = 'snippets'" @mouseover="tooltip = 'snippets'" @mouseleave="tooltip = ''" class="group absolute inset-0 -m-1"> <div class="absolute inset-0 tooltip-reveal rounded-sm"> </div> <div class="absolute inset-0 tooltip-hover rounded-sm"> </div> <template x-if="tooltip == 'snippets'" > <div x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" style="z-index: 200" class=" absolute -m-1 -mt-8 left-10 top-full pl-4 pr-6 py-3 w-48 bg-theme-bg border rounded border-theme-border text-theme-texttext-left text-sm"> Save and reuse code snippets in your projects </div> </template> </div> </div> </div> <div class="flex-1 font-ide flex"> <div class="flex flex-col space-y-4 p-3 text-gray-600"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <div class="flex flex-col space-y-4 p-3 text-theme-text overflow-hidden ide" style="width: 1000px"> <p> <span class="keyword">use</span> <span class="method">App</span>\<span class="method">Models</span>\<span class="method">User</span>; </p> <p> </p> <p> <span class="method">collect</span><span class="braces">(</span><span class="method">User</span>::<span class="method">all</span>())-><span class="method">map</span>(<span class="keyword">function</span> ($user) <span class="curly-brace">{</span> </p> <div class="relative flex ml-4 items-center"> <span class="keyword mr-2">return</span><span class="variable">$user</span>-><span class="property">e</span><span class="h-full w-px bg-white inline-block animate-blink"></span> <div class="absolute border top-7 left-20 flex flex-col rounded" style="width: 450px"> <div class="flex justify-between bg-white text-black p-2"> <div class="flex items-center space-x-2"> <svg class="h-4 w-4" icon="symbol-property"> <use xlink:href="/fonts/codicon.svg#symbol-property" /> </svg> <p class="h-6"><span class="font-medium">e</span>mail</p> </div> <p class="font-light"> pub $email: ?string </p> </div> <div class="flex justify-between p-2"> <div class="flex items-center space-x-2"> <svg class="h-4 w-4" icon="symbol-property"> <use xlink:href="/fonts/codicon.svg#symbol-property" /> </svg> <p class="h-6"><span class="font-medium">e</span>ncrypter</p> </div> <p class="font-light"> pub static $encrypter: ?string </p> </div> <div class="flex justify-between p-2"> <div class="flex items-center space-x-2"> <svg class="h-4 w-4" icon="symbol-method"> <use xlink:href="/fonts/codicon.svg#symbol-method" /> </svg> <p class="h-6"><span class="font-medium">e</span>xists</p> </div> <p class="font-light"> pub $exists: bool </p> </div> </div> </div> <p><span class="curly-brace">}</span>);</p> </div> </div> </div> </div> </div> </div> </div> </section> <div class="grid grid-cols-1 lg:grid-cols-5 md:gap-4"> <section style="background-image: linear-gradient(107.56deg,#1d224d 2.2%,#720080 29.17%,#16191d 95.31%)" class="px-8 lg:px-0 md:col-span-2 relative w-full mt-4 overflow-hidden md:rounded-xl border border-white/5"> <div class="relative pt-12 lg:pt-20 lg:px-8 pb-8 flex flex-col"> <div> <h3 class="mb-5 text-2xl font-bold leading-9 text-white md:text-3xl font-display ">Unleash Eloquent</h3> <p class="pb-10 leading-6 mb:leading-8 text-purple-300 lg:mb-8 text-baseSmall md:text-basePlus lg:pb-0"> It has never been easier to fix a bug on a production environment than by connecting to the application and run a quick Eloquent query. </p> </div> <div class="block"> <div class="rounded-2xl border border-theme-border bg-white/10 p-2"> <div class="rounded-lg border border-theme-border bg-theme-bg"> <div class="flex relative"> <div class="flex-1 font-ide flex"> <div class="flex flex-col space-y-4 p-3 text-gray-600"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <div class="flex flex-col space-y-4 p-3 text-white overflow-hidden ide" style="width: 1000px"> <p> <span class="variable">$value</span><span> = <span class="method">rand</span><span class="braces">(</span><span class="parameter">1</span><span class="braces">,</span> <span class="parameter">10</span><span class="braces">);</span> <span class="comment">//?</span> <span class="magicComments">5</span> </p> <p> </p> <p> <span class="variable">$user</span><span> = <span class="method">User</span>::<span class="method">first</span>();</span> </p> <p> <span class="variable">$user</span>-><span class="property">name</span>; <span class="comment">//?</span> <span class="magicComments">"Marcel"</span> </p> </div> </div> </div> </div> </div> </div> </div> </section> <section style="background-image: linear-gradient(107.56deg,#32123c 2.2%,#32123c 29.17%,#16191d 95.31%)" class="lg:col-span-3 relative w-full mt-4 overflow-hidden md:rounded-xl border border-white/5"> <div class="relative pt-12 md:py-12 lg:py-20 lg:px-8 flex flex-col"> <div class="px-8 md:px-0 "> <h3 class="mb-5 text-2xl font-bold leading-9 text-white md:text-3xl font-display ">Dispatch jobs, preview emails, work with APIs</h3> <p class="pb-10 leading-6 mb:leading-8 text-purple-300 lg:mb-8 text-baseSmall md:text-basePlus lg:pb-0"> You can do everything within the editor without reloading your browser to dump variables and objects. Tinkerwell detects the output type and displays emails, creates searchable tables and renders object graphs with relations for complex objects. </p> </div> <div class="block pl-8 mr:pl-0"> <div class="rounded-2xl border border-theme-border bg-white/10 p-2"> <div class="rounded-lg border border-theme-border bg-theme-bg"> <div class="flex relative"> <div class="flex-1 font-ide flex"> <div class="flex flex-col space-y-4 p-3 text-gray-600"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <div class="flex flex-col space-y-4 p-3 text-white overflow-hidden relative" style="width: 1000px"> <p> <span class="text-theme-variable-color">$response</span> = Http::get(<span class="text-theme-string-color">'https://api.github.com/users/</span> </p> <p> </p> <p> <span class="text-theme-variable-color">$gists</span> = <span class="text-indigo-50text-theme-variable-color">$response</span>->json(); </p> <p> <span class="text-theme-constant-color">foreach</span> (<span class="text-theme-variable-color">$gists</span> as <span class="text-theme-variable-color">$gist</span>) { </p> <p class="ml-4"> <span class="text-theme-variable-color">echo</span> <span class="text-theme-variable-color">$gist</span>[<span class="text-theme-string-color">'html_url'</span>]; </p> <div class="absolute border top-14 left-0 flex flex-col rounded p-2 bg-black ml-8 z-20" style="width: 450px"> <input class="text-gray-400 bg-transparent focus:outline-none" spellcheck="false" readonly value="Get all GitHub Gists from user mpociot" placeholder="What should the code do? Use ↑↓ for history" > <div class="flex justify-between pt-1 text-xs w-full"> <span>Close (Esc)</span> <span>Cmd+K to toggle focus</span> </div> </div> </div> </div> <div class="absolute inset-0 h-full w-full bg-blend-bg/50 z-10"></div> </div> </div> </div> </div> </div> </section> </div> <section class="mt-20 w-full px-4 mx-auto text-center md:px-0 md:mt-28"> <div class="mx-auto"> <h2 class="mb-3 text-3xl font-bold leading-10 md:text-4xl font-display">Made with you in mind</h2> <p class="leading-7 text-basePlus text-silver-700"> All the tools we build at Beyond Code have one main goal – to make your life easier. </p> </div> <ul class="items-start justify-between w-full mt-16 text-left md:text-center md:flex"> <li class="flex flex-col items-center md:w-1/3 md:pr-10"> <div class="flex items-start md:items-center md:flex-col"> <div class="w-12 h-12 md:mb-8"> <img src="images/icons/save_time.svg" alt="Tinkerwell saves Time"> </div> <div class="w-11/12 pl-6 md:pl-0"> <h3 class="mb-2 text-xl leading-8 font-display "> Save time </h3> <p class="leading-6 text-silver-700 text-baseSmall"> There’s no need to waste time creating test routes or controllers. Just write code. </p> </div> </div> </li> <li class="flex flex-col items-center mt-8 md:w-1/3 md:pr-10 md:mt-0"> <div class="flex items-start md:items-center md:flex-col"> <div class="w-12 h-12 md:mb-8"> <img src="images/icons/improve_workflow.svg" alt="Tinkerwell improves Workflow"> </div> <div class="w-11/12 pl-6 md:pl-0"> <h3 class="mb-2 text-xl leading-8 font-display "> Improve your workflow </h3> <p class="pr-4 text-base leading-6 text-silver-700 text-baseSmall md:pr-0"> Application context coding and debugging will help you get every job done faster. </p> </div> </div> </li> <li class="flex flex-col items-center mt-8 md:w-1/3 md:pr-10 md:mt-0"> <div class="flex items-start md:items-center md:flex-col"> <div class="w-12 h-12 md:mb-8"> <img src="images/icons/boost_productivity.svg" alt="Tinkerwell boosts productivity"> </div> <div class="w-11/12 pl-6 md:pl-0"> <h3 class="mb-2 text-xl leading-8 font-display "> Boost your productivity </h3> <p class="text-base leading-6 text-silver-700 text-baseSmall"> When you start using Tinkerwell, you’ll wonder how you were ever productive without it. </p> </div> </div> </li> </ul> </section> </main> </div> </div> <div class="relative z-10 px-0 mx-auto text-white max-w-screen overflow-hidden"> <main class="max-w-8xl w-full mx-auto md:px-8 xl:px-28 "> <section class="relative z-20 w-full pb-12 px-8 md:px-0 mt-28 md:rounded-xl" style="background-image: linear-gradient(to right, #2c4064, #202c43, #0F2027)" id="feature-list" x-init="$watch('currentVideo', value => $nextTick(() => showStars(value)))" x-data="{ currentVideo: 'runProd', currentVideoTitle: 'Run code via SSH', currentVideoUrl: 'https://www.youtube.com/embed/FN6h2Iph-lA?si=sXMMvhj_aXvH7G0L' }"> <div class="relative w-full px-4 pt-12 mx-auto md:pt-20 md:pr-20 md:text-center md:px-16" id="features"> <h2 class="mb-4 text-2xl font-bold leading-9 text-white md:text-3xl font-display "> Tinkerwell is more than just a tinker tool. Way more. </h2> <p class="leading-6 md:leading-8 text-baseSmall md:text-basePlus text-silver-700"> Explore the features that make Tinkerwell the perfect companion for your daily development workflow. </p> </div> <div class="grid grid-cols-1 md:grid-cols-5 gap-8"> <ul class="md:col-span-2 relative grid items-start justify-between grid-flow-row grid-cols-1 px-4 pt-10 leading-6 lg:pt-16 xl:pl-16 xl:pr-20 text-baseSmall md:gap-7"> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="Run code via SSH" url="https://www.youtube.com/embed/FN6h2Iph-lA?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="runProd" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'runProd', ' hover:bg-gray-900/30' : currentVideo !== 'runProd'}" @click="currentVideo = 'runProd'; currentVideoUrl = 'https://www.youtube.com/embed/FN6h2Iph-lA?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'Run code via SSH'"> <template x-if="currentVideo === 'runProd'"> <div id="stars-runProd" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">Run code via SSH</em> Run your PHP code on remote servers – without modifying your live code or files in any way. </li> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="Detail Dive" url="https://www.youtube.com/embed/9FBBsnwRWJ4?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="detailDive" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'detailDive', ' hover:bg-gray-900/30' : currentVideo !== 'detailDive'}" @click="currentVideo = 'detailDive'; currentVideoUrl = 'https://www.youtube.com/embed/9FBBsnwRWJ4?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'Detail Dive'"> <template x-if="currentVideo === 'detailDive'"> <div id="stars-detailDive" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">Detail Dive</em> Display the output in expandable cards, interactive tables, and graphs. You can even preview emails flawlessly. </li> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="Magic Comments" url="https://www.youtube.com/embed/YkOA8MJCy3M?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="magicComments" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'magicComments', ' hover:bg-gray-900/30' : currentVideo !== 'magicComments'}" @click="currentVideo = 'magicComments'; currentVideoUrl = 'https://www.youtube.com/embed/YkOA8MJCy3M?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'Magic Comments'"> <template x-if="currentVideo === 'magicComments'"> <div id="stars-magicComments" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">Magic Comments</em> Debug your PHP code with the usage of magic comments and live code-coverage like never before. </li> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="AI code generation" url="https://www.youtube.com/embed/ZesF5wn17Lc?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="aiCompletion" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'aiCompletion', ' hover:bg-gray-900/30' : currentVideo !== 'aiCompletion'}" @click="currentVideo = 'aiCompletion'; currentVideoUrl = 'https://www.youtube.com/embed/ZesF5wn17Lc?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'AI code generation'"> <template x-if="currentVideo === 'aiCompletion'"> <div id="stars-aiCompletion" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">AI code generation</em> Let the AI assistant do the heavy lifting and fill out the details where it lacks context. </li> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="Inspect logs" url="https://www.youtube.com/embed/xueaDEJvFsc?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="logViewer" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'logViewer', ' hover:bg-gray-900/30' : currentVideo !== 'logViewer'}" @click="currentVideo = 'logViewer'; currentVideoUrl = 'https://www.youtube.com/embed/xueaDEJvFsc?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'Inspect logs'"> <template x-if="currentVideo === 'logViewer'"> <div id="stars-logViewer" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">Inspect logs</em> Trail logs when you are connected to an application and inspect them with Tinkerwells debugging capabilities. </li> <li class="w-full p-4 transition-all duration-150 ease-in-out rounded-lg opacity-100 cursor-pointer -all text-sky-200 relative overflow-hidden" title="Tinker on Laravel Vapor" url="https://www.youtube.com/embed/Yrn8gIcwJMY?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing" video="vapor" :class="{'bg-black bg-opacity-70 opacity-100': currentVideo === 'vapor', ' hover:bg-gray-900/30' : currentVideo !== 'vapor'}" @click="currentVideo = 'vapor'; currentVideoUrl = 'https://www.youtube.com/embed/Yrn8gIcwJMY?si=sXMMvhj_aXvH7G0L&widget_referrer=tinkerwell_landing'; currentVideoTitle = 'Tinker on Laravel Vapor'"> <template x-if="currentVideo === 'vapor'"> <div id="stars-vapor" data-options='{ "number": { "value": 50 }, "move": { "enable": true, "random": true, "speed": 0.5, "straight": false } }' style="mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%); -webkit-mask-image: radial-gradient(43.27% 50% at 50% 50%,#fff 17.51%,rgba(255,255,255,0) 100%);" class="absolute h-full w-full"></div> </template> <em class="not-italic font-bold text-white">Tinker on Laravel Vapor</em> Evaluate your code on any of your environments – including Laravel Vapor and Docker. </li> </ul> <div> <div class="md:py-32 relative w-full md:w-[820px]"> <div class="group relative overflow-hidden rounded-lg shadow-2xl shadow-[#3A8FF5]" style="--tw-shadow-colored: 0 0px 150px -70px var(--tw-shadow-color)" > <div onclick="document.getElementById('youtubeModal').__x.$data.open(document.getElementById('feature-list').__x.$data.currentVideoUrl, document.getElementById('feature-list').__x.$data.currentVideoTitle);return false;" class="cursor-pointer w-full h-full z-20 absolute flex items-center justify-center"> <svg class="absolute h-32 w-32 md:h-56 md:w-56 transition-opacity duration-300 group-hover:opacity-90 opacity-50 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" /> </svg> </div> <img x-show="currentVideo == 'runProd'" src="/features/ssh.png" /> <img x-show="currentVideo == 'detailDive'" src="/features/detail-dive.png" /> <img x-show="currentVideo == 'magicComments'" src="/features/magic-comments.png" /> <img x-show="currentVideo == 'aiCompletion'" src="/features/ai-completion.png" /> <img x-show="currentVideo == 'logViewer'" src="/features/log-viewer.png" /> <img x-show="currentVideo == 'vapor'" src="/features/vapor.png" /> </div> </div> </div> </div> </section> </main> </div> <div class="relative z-10 px-0 mx-auto text-white max-w-8xl md:px-8 xl:px-28"> <main class="w-full mx-auto "> <section class="mt-20 overflow-hidden md:text-center md:mt-28 relative"> <div class="w-full mx-auto"> <img src="images/testimonial-circles.svg" alt="Tinkerwell circle background image" class="absolute hidden -mt-48 sm:block"> <img src="images/testimonial-circles-mobile.svg" alt="Tinkerwell circle background image" class="absolute block -mt-10 sm:hidden "> </div> <div class="relative z-10 px-4 mx-auto md:px-0 lg:w-1/2 "> <h2 class="mb-4 text-3xl font-bold leading-9 md:text-4xl md:leading-10"> Trusted and tested by the best</h2> <p class="leading-6 md:leading-8 text-baseSmall md:text-basePlus text-silver-700"> Tinkerwell is trusted by more than 12,000 developers across the globe. Here’s what they have to say. </p> </div> <div x-data="{showTestimonials:false}"> <div class="relative"> <ul class="relative z-10 items-start justify-between px-4 pt-20 text-left md:px-0 md:pr-1 md:pl-16 md:flex"> <li class="flex items-start w-full text-lg leading-6 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/taylor.jpeg" alt="Taylor Otwell, CEO of Laravel" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “I’ve pretty much used Tinkerwell every day since it was released.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Taylor Otwell</p> <p class="leading-6 text-baseSmall text-silver-600 ">Creator of Laravel</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/mohamed.jpeg" alt="Mohamed Said, VP of Engineering at Foodics" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “I don't know why anyone wouldn’t use Tinkerwell. I can't even remember how I used to test code on the go before it.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Mohamed Said</p> <p class="leading-6 text-baseSmall text-silver-600 ">VP of Engineering at Foodics</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/eric.jpeg" alt="Eric L. Barnes, Creator of Laravel News" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “I use Tinkerwell all the time now. Love that app.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Eric L. Barnes</p> <p class="leading-6 text-baseSmall text-silver-600 ">Creator of Laravel News</p> </div> </li> </ul> <ul class="relative z-10 items-start justify-between px-4 text-left md:pt-20 md:px-0 md:pr-1 md:pl-16 md:flex"> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/jack.jpg" alt="Chris Arter, Laravel Contributor" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “I use Tinkerwell every single day and have 25 tabs open at any one time. It’s the essential tool for Laravel developers” </blockquote> <p class="font-bold leading-6 text-baseSmall">Jack Ellis</p> <p class="leading-6 text-baseSmall text-silver-600 ">Co-founder of Fathom Analytics</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src=" images/testimonials/israel.png" alt="Israel Araujo, Developer" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Amazing. I don't know how I lived without it. Much better than my former workflow.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Israel Araujo</p> <p class="leading-6 text-baseSmall text-silver-600">Developer</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/jess_archer.jpeg" alt="Jess Archer, Laravel Core team member" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Tinkerwell is the fastest way to test an idea or debug an application. It just keeps getting better and better!” </blockquote> <p class="font-bold leading-6 text-baseSmall">Jess Archer</p> <p class="leading-6 text-baseSmall text-silver-600">Laravel Core team member</p> </div> </li> </ul> <div x-show="! showTestimonials" class="inset-x-0 bottom-0 flex justify-center bg-gradient-to-t from-silver-900 pt-32 pb-8 pointer-events-none absolute z-30"> <button x-on:click="showTestimonials = true" type="button" class="relative focus:outline-none text-sm text-white font-semibold h-12 px-6 rounded-lg flex items-center pointer-events-auto">Show more…</button> </div> </div> <div x-cloak x-show="showTestimonials"> <ul class="relative z-10 items-start justify-between px-4 text-left md:pt-20 md:px-0 md:pr-1 md:pl-16 md:flex"> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/gilbert_pellegrom.jpeg" alt="Gilbert Pellegrom, CTO at Lemon Squeezy" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Tinkerwell quickly became an essential part of my daily Laravel workflow. It’s easily the biggest upgrade to my dev experience in years.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Gilbert Pellegrom</p> <p class="leading-6 text-baseSmall text-silver-600">CTO at Lemon Squeezy</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/alex_garrett_smith.jpeg" alt="Alex Garrett-Smith, Founder of CodeCourse" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “My productivity soared with Tinkerwell. This should be part of every PHP developer's toolkit.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Alex Garrett-Smith</p> <p class="leading-6 text-baseSmall text-silver-600">Founder of CodeCourse</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/lars_peterke.jpeg" alt="Lars Peterke, Developer" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Tinkerwell is the swiss army knive for every developer's daily work. It's that essential.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Lars Peterke</p> <p class="leading-6 text-baseSmall text-silver-600">Developer</p> </div> </li> </ul> <ul class="relative z-10 items-start justify-between px-4 text-left md:pt-20 md:px-0 md:pr-1 md:pl-16 md:flex"> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/sam_carre.jpeg" alt="Sam Carré, Head of engineering at Codepotato" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Gone are the days of creating a whole PHP app just to test a function or two. Tinkerwell has helped me level-up as a developer.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Sam Carré</p> <p class="leading-6 text-baseSmall text-silver-600">Head of engineering at Codepotato</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/tony.jpeg" alt="Tony Lea, Developer at Cirricula" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Pretty rad man. With the auto reload functionality as I type, it makes it easy to debug a lot of the logic in my apps. Very well done.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Tony Lea</p> <p class="leading-6 text-baseSmall text-silver-600">Developer at Cirricula</p> </div> </li> <li class="flex items-start w-full mt-10 text-lg leading-6 md:mt-0 md:pr-12 lg:pr-24 md:flex-col md:w-1/3 text-sky-200"> <img src="images/testimonials/daniel_ferguson.jpeg" alt="Daniel Ferguson, CTO at Imperial Wealth" class="w-16 mb-6 mr-6 rounded-full md:mr-0" /> <div> <blockquote class="mb-4 font-medium leading-6 text-white text-baseSmall md:text-basePlus"> “Tinkerwell takes the guess work out of development. It’s one of the few apps that lives on my toolbar - I reach for it daily.” </blockquote> <p class="font-bold leading-6 text-baseSmall">Daniel Ferguson</p> <p class="leading-6 text-baseSmall text-silver-600">CTO at Imperial Wealth</p> </div> </li> </ul> </div> </div> </section> <section id="pricing"> <div class="relative z-10 w-full px-8 pt-12 mt-16 md:pt-20 lg:px-0 lg:pl-16 md:rounded-xl bg-gradient-to-b from-silver-500 to-silver-900"> <div class="w-full items-center justify-centers flex flex-col"> <h2 class="mb-3 text-3xl font-bold leading-10 md:text-4xl font-display">Pay once, use forever</h2> <p class="mb-8 leading-6 md:leading-8 text-baseSmall md:text-basePlus text-silver-700"> Every purchase includes a <a href="/perpetual-license" class="underline">perpetual fallback license</a> that you can use forever. </p> </div> <div class="items-center justify-between lg:flex mt-4"> <div class="hidden lg:block text-left lg:w-1/2 lg:pr-20"> <h2 class="mb-4 text-xl font-bold leading-6 font-display text-sky-300"> Tinker, tailor, time to buy </h2> <h3 class="mb-5 text-3xl font-bold leading-9 text-white font-display "> Enjoy coding and debugging by adding Tinkerwell to your daily workflow. </h3> <p class="mb-8 font-normal leading-6 text-baseSmall text-silver-400"> Got a team? Invest in your people and save some extra cash with our <a href="#teamlicense" class="text-white underline">team license</a>. </p> </div> <div class="relative lg:w-1/2 lg:pr-16"> <div class="overflow-hidden relative bg-white rounded-xl"> <div class="flex items-center justify-between px-8 pt-5 pb-2 text-silver-900 bg-silver-200"> <div class="leading-6 text-lg pr-8 flex flex-col"> <span>Single Developer License</span> </div> <div class="flex items-baseline"> <div class="text-4xl leading-10 font-regular"> <span class="paddle-net" data-product="581356"></span> </div> </div> </div> <ul class="relative px-6 pt-8 leading-6 text-baseSmall text-silver-950 bg-white"> <li class="flex items-center py-4 border-b border-dashed border-silver-300"> <img src="images/icons/checkmark.svg" class="mr-3" alt="Icon background image"/> Available for macOS, Windows and Linux </li> <li class="flex items-center py-4 border-b border-dashed border-silver-300"> <img src="images/icons/checkmark.svg" class="mr-3" alt="Icon background image"/> License for two devices </li> <li class="flex items-center py-4 border-b border-dashed border-silver-300"> <img src="images/icons/checkmark.svg" class="mr-3" alt="Icon background image"/> 30-days money-back guarantee </li> <li class="flex items-center py-4 border-b border-dashed border-silver-300"> <img src="images/icons/checkmark.svg" class="mr-3" alt="Icon background image"/> Includes access to all updates for one year </li> <li class="flex items-center py-4"> <img src="images/icons/checkmark.svg" class="mr-3" alt="Icon background image"/> Perpetual fallback license (pay once, use forever) </li> </ul> <div class='relative px-6 pb-6 pt-8'> <a href="https://tinkerwell.app/checkout" class="w-full block py-3 font-medium leading-6 text-center text-white transition duration-300 ease-in-out rounded-lg focus:outline-none bg-purple font-regular hover:bg-purple-500 active:bg-purple-700 active:text-opacity-70" > Buy Tinkerwell </a> </div> </div> </div> </div> </div> <div class="w-full px-16 py-6 text-sm text-right text-gray-400"> </div> <div class="relative hidden md:block z-10 w-full mb-20 text-center border border-solid gradientBorderRadial" id="teamlicense"> <h4 class="mt-20 mb-4 text-lg font-bold leading-6 md:text-xl font-display text-sky-300 "> Take one for the team </h4> <h3 class="mb-4 text-3xl font-bold leading-8 text-white md:text-4xl md:leading-9 font-display"> Treat your team to the workflow that they deserve </h3> <p class="leading-6 md:leading-8 text-baseSmall md:text-basePlus text-silver-700 mb-20 max-w-5xl mx-auto"> If you work in a team and would like to introduce Beyond Code tools to your colleagues, we offer team licenses for all of our products. Simply <a href="https://forms.reform.app/beyondcode/contact-sales/hvizq9" class="underline">request a quote</a> that you can share with your manager or purchasing department and we will get back to you as soon as possible. </p> <div class='grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 md:grid' x-data="{ overrides: [] }" @prices-updated.window="overrides = $event.detail.priceOverrides"> <div class='flex items-center justify-between px-4 py-6 mx-4 border border-t border-b border-l border-r border-solid md:mx-0 md:border-t-0 md:border-b-0 gradientBorderToBottomSmall md:py-0 md:pb-20 md:text-center md:px-12 lg:px-10 2xl:px-16 md:flex-col md:gradientBorderToBottom'> <div class="flex flex-col"> <span class="pb-2 leading-6 md:pb-4 text-baseSmall text-silver-400">Custom requirements</span> <span class="text-4xl leading-10 text-white md:pb-6"> <span>tbd</span> </span> </div> <a href="https://forms.reform.app/beyondcode/contact-sales/hvizq9" class="px-6 py-3 font-medium transition duration-300 ease-in-out border border-white rounded-lg text-baseSmall leading-24 focus:outline-none bg-silver-900 border-opacity-20 hover:border-opacity-50 hover:bg-white hover:bg-opacity-10 active:border-opacity-20 active:bg-opacity-10 "> Request quote </a> </div> <template x-for="override in overrides" :key="override.quantity"> <div class='flex items-center justify-between px-4 py-6 mx-4 border border-t border-b border-l border-r border-solid md:mx-0 md:border-t-0 md:border-b-0 gradientBorderToBottomSmall md:py-0 md:pb-20 md:text-center md:px-12 lg:px-10 2xl:px-16 md:flex-col md:gradientBorderToBottom'> <div class="flex flex-col"> <span class="pb-2 leading-6 md:pb-4 text-baseSmall text-silver-400"><span x-text="override.quantity"></span> users</span> <span class="text-4xl leading-10 text-white md:pb-6"> <span x-text="override.priceToDisplay"></span> </span> </div> <button @click.prevent="openCheckout(override.link)" class="px-6 py-3 font-medium transition duration-300 ease-in-out border border-white rounded-lg text-baseSmall leading-24 focus:outline-none bg-silver-900 border-opacity-20 hover:border-opacity-50 hover:bg-white hover:bg-opacity-10 active:border-opacity-20 active:bg-opacity-10 "> Save <span x-text="override.discount"></span> </button> </div> </template> </div> </div> </section> </main> <div id="mailPreviewModal" x-data="{ show: false, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-3xl mb-6 overflow-hidden transition-all transform bg-theme-bg rounded-lg shadow-xl sm:w-full sm:mx-auto mt-64" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-2 text-black md:px-4"> <svg @click="show = false" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="flex items-center justify-between w-full text-center"> <div class="w-full pt-4 pb-2 border-b border-theme-border text-theme-text text-base"> HTML Preview </div> </div> <div class="flex flex-col flex-1 pt-4 w-full"> <div class="bg-white w-full flex items-center justify-center flex-col space-y-4" style="height: 400px;"> <img class="h-12" src="/images/tinkerwell_logo.png"> <span class="font-mono text-gray-800">Get instant HTML previews from your mailables or views</span> </div> </div> </div> </div> </div> <div id="youtubeModal" x-data="{ show: false, url: '', title: '', open: function (url, title) { this.url = url; this.title = title; this.show = true; } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-5xl mb-6 overflow-hidden transition-all transform bg-theme-bg rounded-lg shadow-xl sm:w-full sm:mx-auto mt-64" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-2 text-black md:px-4"> <svg @click="show = false" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="flex items-center justify-between w-full text-center"> <div class="w-full pt-4 pb-2 border-b border-theme-border text-theme-text text-base" x-text="title"> </div> </div> <div class="py-4 w-full"> <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> <div class='embed-container'><iframe x-bind:src="url" frameborder='0' allowfullscreen></iframe></div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement("style"), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf("MAC") ? "Cmd" : "Ctrl", addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; refStyle.innerHTML = "pre.sf-dump .sf-dump-compact, .sf-dump-str-collapse .sf-dump-str-collapse, .sf-dump-str-expand .sf-dump-str-expand { display: none; }"; ( doc.documentElement.firstElementChild || doc.documentElement.children[0] ).appendChild(refStyle); refStyle = doc.createElement("style"); ( doc.documentElement.firstElementChild || doc.documentElement.children[0] ).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent("on" + eventName, function (e) { e.preventDefault = function () { e.returnValue = false; }; e.target = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow = "▼"; newClass = "sf-dump-expanded"; } else if (/\bsf-dump-expanded\b/.test(oldClass)) { arrow = "▶"; newClass = "sf-dump-compact"; } else { return false; } if (doc.createEvent && s.dispatchEvent) { var event = doc.createEvent("Event"); event.initEvent( "sf-dump-expanded" === newClass ? "sfbeforedumpexpand" : "sfbeforedumpcollapse", true, false ); s.dispatchEvent(event); } a.lastChild.innerHTML = arrow; s.className = s.className.replace( /\bsf-dump-(compact|expanded)\b/, newClass ); if (recursive) { try { a = s.querySelectorAll("." + oldClass); for (s = 0; s < a.length; ++s) { if (-1 == a[s].className.indexOf(newClass)) { a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML = arrow; } } } catch (e) {} } return true; } function collapse(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if (/\bsf-dump-expanded\b/.test(oldClass)) { toggle(a, recursive); return true; } return false; } function expand(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className; if (/\bsf-dump-compact\b/.test(oldClass)) { toggle(a, recursive); return true; } return false; } function collapseAll(root) { var a = root.querySelector("a.sf-dump-toggle"); if (a) { collapse(a, true); expand(a); return true; } return false; } function reveal(node) { var previous, parents = []; while ( (node = node.parentNode || {}) && (previous = node.previousSibling) && "A" === previous.tagName ) { parents.push(previous); } if (0 !== parents.length) { parents.forEach(function (parent) { expand(parent); }); return true; } return false; } function highlight(root, activeNode, nodes) { resetHighlightedNodes(root); Array.from(nodes || []).forEach(function (node) { if (!/\bsf-dump-highlight\b/.test(node.className)) { node.className = node.className + " sf-dump-highlight"; } }); if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) { activeNode.className = activeNode.className + " sf-dump-highlight-active"; } } function resetHighlightedNodes(root) { Array.from( root.querySelectorAll( ".sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private" ) ).forEach(function (strNode) { strNode.className = strNode.className.replace( /\bsf-dump-highlight\b/, "" ); strNode.className = strNode.className.replace( /\bsf-dump-highlight-active\b/, "" ); }); } return function (root, x) { root = doc.getElementById(root); var indentRx = new RegExp( "^(" + (root.getAttribute("data-indent-pad") || " ").replace( rxEsc, "\\$1" ) + ")+", "m" ), options = { maxDepth: 2, maxStringLength: 160, fileLinkFormat: null, }, elt = root.getElementsByTagName("A"), len = elt.length, i = 0, s, h, t = []; while (i < len) t.push(elt[i++]); for (i in x) { options[i] = x[i]; } function a(e, f) { addEventListener(root, e, function (e, n) { if ("A" == e.target.tagName) { f(e.target, e); } else if ("A" == e.target.parentNode.tagName) { f(e.target.parentNode, e); } else { n = /\bsf-dump-ellipsis\b/.test(e.target.className) ? e.target.parentNode : e.target; if ((n = n.nextElementSibling) && "A" == n.tagName) { if (!/\bsf-dump-toggle\b/.test(n.className)) { n = n.nextElementSibling || n; } f(n, e, true); } } }); } function isCtrlKey(e) { return e.ctrlKey || e.metaKey; } function xpathString(str) { var parts = str.match(/[^'"]+|['"]/g).map(function (part) { if ("'" == part) { return '"\'"'; } if ('"' == part) { return "'\"'"; } return "'" + part + "'"; }); return "concat(" + parts.join(",") + ", '')"; } function xpathHasClass(className) { return ( "contains(concat(' ', normalize-space(@class), ' '), ' " + className + " ')" ); } addEventListener(root, "mouseover", function (e) { if ("" != refStyle.innerHTML) { refStyle.innerHTML = ""; } }); a("mouseover", function (a, e, c) { if (c) { e.target.style.cursor = "pointer"; } else if ((a = idRx.exec(a.className))) { try { refStyle.innerHTML = "pre.sf-dump ." + a[0] + "{background-color: #B729D9; color: #FFF !important; border-radius: 2px}"; } catch (e) {} } }); a("click", function (a, e, c) { if (/\bsf-dump-toggle\b/.test(a.className)) { e.preventDefault(); if (!toggle(a, isCtrlKey(e))) { var r = doc.getElementById(a.getAttribute("href").substr(1)), s = r.previousSibling, f = r.parentNode, t = a.parentNode; t.replaceChild(r, a); f.replaceChild(a, s); t.insertBefore(s, r); f = f.firstChild.nodeValue.match(indentRx); t = t.firstChild.nodeValue.match(indentRx); if (f && t && f[0] !== t[0]) { r.innerHTML = r.innerHTML.replace( new RegExp("^" + f[0].replace(rxEsc, "\\$1"), "mg"), t[0] ); } if (/\bsf-dump-compact\b/.test(r.className)) { toggle(s, isCtrlKey(e)); } } if (c) { } else if (doc.getSelection) { try { doc.getSelection().removeAllRanges(); } catch (e) { doc.getSelection().empty(); } } else { doc.selection.empty(); } } else if (/\bsf-dump-str-toggle\b/.test(a.className)) { e.preventDefault(); e = a.parentNode.parentNode; e.className = e.className.replace( /\bsf-dump-str-(expand|collapse)\b/, a.parentNode.className ); } }); elt = root.getElementsByTagName("SAMP"); len = elt.length; i = 0; while (i < len) t.push(elt[i++]); len = t.length; for (i = 0; i < len; ++i) { elt = t[i]; if ("SAMP" == elt.tagName) { a = elt.previousSibling || {}; if ("A" != a.tagName) { a = doc.createElement("A"); a.className = "sf-dump-ref"; elt.parentNode.insertBefore(a, elt); } else { a.innerHTML += " "; } a.title = (a.title ? a.title + "\n[" : "[") + keyHint + "+click] Expand all children"; a.innerHTML += elt.className == "sf-dump-compact" ? "<span>▶</span>" : "<span>▼</span>"; a.className += " sf-dump-toggle"; x = 1; if ("sf-dump" != elt.parentNode.className) { x += elt.parentNode.getAttribute("data-depth") / 1; } } else if ( /\bsf-dump-ref\b/.test(elt.className) && (a = elt.getAttribute("href")) ) { a = a.substr(1); elt.className += " " + a; if (/[\[{]$/.test(elt.previousSibling.nodeValue)) { a = a != elt.nextSibling.id && doc.getElementById(a); try { s = a.nextSibling; elt.appendChild(a); s.parentNode.insertBefore(a, s); if (/^[@#]/.test(elt.innerHTML)) { elt.innerHTML += " <span>▶</span>"; } else { elt.innerHTML = "<span>▶</span>"; elt.className = "sf-dump-ref"; } elt.className += " sf-dump-toggle"; } catch (e) { if ("&" == elt.innerHTML.charAt(0)) { elt.innerHTML = "…"; elt.className = "sf-dump-ref"; } } } } } if (doc.evaluate && Array.from && root.children.length > 1) { root.setAttribute("tabindex", 0); SearchState = function () { this.nodes = []; this.idx = 0; }; SearchState.prototype = { next: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx < this.nodes.length - 1 ? this.idx + 1 : 0; return this.current(); }, previous: function () { if (this.isEmpty()) { return this.current(); } this.idx = this.idx > 0 ? this.idx - 1 : this.nodes.length - 1; return this.current(); }, isEmpty: function () { return 0 === this.count(); }, current: function () { if (this.isEmpty()) { return null; } return this.nodes[this.idx]; }, reset: function () { this.nodes = []; this.idx = 0; }, count: function () { return this.nodes.length; }, }; function showCurrent(state) { var currentNode = state.current(), currentRect, searchRect; if (currentNode) { reveal(currentNode); highlight(root, currentNode, state.nodes); if ("scrollIntoView" in currentNode) { currentNode.scrollIntoView(true); currentRect = currentNode.getBoundingClientRect(); searchRect = search.getBoundingClientRect(); if (currentRect.top < searchRect.top + searchRect.height) { window.scrollBy(0, -(searchRect.top + searchRect.height + 5)); } } } counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + " of " + state.count(); } var search = doc.createElement("div"); search.className = "sf-dump-search-wrapper sf-dump-search-hidden"; search.innerHTML = ` <input type="text" class="sf-dump-search-input"> <span class="sf-dump-search-count">0 of 0<\/span> <button type="button" class="sf-dump-search-input-previous" tabindex="-1"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 1331l-166 165q-19 19-45 19t-45-19L896 965l-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"\/><\/svg> <\/button> <button type="button" class="sf-dump-search-input-next" tabindex="-1"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19L109 808q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"\/><\/svg> <\/button> `; root.insertBefore(search, root.firstChild); var state = new SearchState(); var searchInput = search.querySelector(".sf-dump-search-input"); var counter = search.querySelector(".sf-dump-search-count"); var searchInputTimer = 0; var previousSearchQuery = ""; addEventListener(searchInput, "keyup", function (e) { var searchQuery = e.target.value; /* Don't perform anything if the pressed key didn't change the query */ if (searchQuery === previousSearchQuery) { return; } previousSearchQuery = searchQuery; clearTimeout(searchInputTimer); searchInputTimer = setTimeout(function () { state.reset(); collapseAll(root); resetHighlightedNodes(root); if ("" === searchQuery) { counter.textContent = "0 of 0"; return; } var classMatches = [ "sf-dump-str", "sf-dump-key", "sf-dump-public", "sf-dump-protected", "sf-dump-private", ] .map(xpathHasClass) .join(" or "); var xpathResult = doc.evaluate( ".//span[" + classMatches + "][contains(translate(child::text(), " + xpathString(searchQuery.toUpperCase()) + ", " + xpathString(searchQuery.toLowerCase()) + "), " + xpathString(searchQuery.toLowerCase()) + ")]", root, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null ); while ((node = xpathResult.iterateNext())) state.nodes.push(node); showCurrent(state); }, 400); }); Array.from( search.querySelectorAll( ".sf-dump-search-input-next, .sf-dump-search-input-previous" ) ).forEach(function (btn) { addEventListener(btn, "click", function (e) { e.preventDefault(); -1 !== e.target.className.indexOf("next") ? state.next() : state.previous(); searchInput.focus(); collapseAll(root); showCurrent(state); }); }); } if (0 >= options.maxStringLength) { return; } try { elt = root.querySelectorAll(".sf-dump-str"); len = elt.length; i = 0; t = []; while (i < len) t.push(elt[i++]); len = t.length; for (i = 0; i < len; ++i) { elt = t[i]; s = elt.innerText || elt.textContent; x = s.length - options.maxStringLength; if (0 < x) { h = elt.innerHTML; elt[elt.innerText ? "innerText" : "textContent"] = s.substring( 0, options.maxStringLength ); elt.className += " sf-dump-str-collapse"; elt.innerHTML = '<span class="sf-dump-str-collapse">' + h + '<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> ◀</a></span>' + '<span class="sf-dump-str-expand">' + elt.innerHTML + '<a class="sf-dump-ref sf-dump-str-toggle" title="' + x + ' remaining characters"> ▶</a></span>'; } } } catch (e) {} }; })(document); Sfdump('sf-dump-1688767905') //Sfdump('sf-dump-1148698855') </script> <script> $(function() { $.ajax({ url: 'https://checkout.paddle.com/api/2.0/prices', dataType: 'jsonp', data: { product_ids: "637105, 595023, 581356", coupons: "" }, success: function (data) { data.response.products.map(product => { let currency = '$'; if (product.currency === 'EUR') { currency = '€'; } else if (product.currency === 'USD') { currency = '$'; } else { currency = product.currency; } product.price.net = (product.price.net).toLocaleString( undefined, { minimumFractionDigits: 2 } ); $('.price-'+product.product_id).text(currency + product.price.net) $('.listPrice-'+product.product_id).text(currency + product.list_price.net) }); } }); }); $(function(){ $('#countdown').countdown('2024-12-02 23:59:59', function(event) { $(this).html(event.strftime('%-Dd %Hh %Mm %Ss')); }); }); </script> <footer class="w-full border-t border-solid gradientBorderRadial pt-16 mt-24"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 px-4 lg:px-0 gap-4"> <div class="flex"> <div class="flex flex-col space-y-4"> <div class="flex items-center"> <img src="/images/tinkerwell_logo.png" alt="Tinkerwell Logo" class="h-10"> <span class="pl-3 font-mono text-base">Tinkerwell</span> </div> <div> <p class="text-sm leading-6 text-silver-700 max-w-xs"> The code runner for PHP.<br class="hidden md:inline"> Loved by developers like you. </p> </div> <div class="flex space-x-2"> <a href="https://twitter.com/tinkerwellapp" class="text-silver-700"> <span class="sr-only">Twitter</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /> </svg> </a> <a href="https://github.com/tinkerwellapp" class="text-silver-700"> <span class="sr-only">GitHub</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /> </svg> </a> </div> </div> </div> <div class="flex lg:justify-center"> <div class="flex flex-col text-sm leading-6 text-silver-700 space-y-1"> <h2 class="mb-4 text-lg font-bold leading-6 md:text-xl font-display text-white">Features</h2> <a href="https://tinkerwell.app/features/detail-dive"> Detail Dive </a> <a href="/features/ai"> AI code generation </a> <a href="/features/magic-comments"> Magic Comments </a> <a href="/features/repl"> REPL (code evaluation) </a> <a href="/features/logviewer"> Log Tailing </a> <a href="/features/table-mode"> Table Mode </a> <a href="/features/command-palette"> Command Palette </a> <a href="/features/laravel-herd-integration"> Laravel Herd Integration </a> <a href="/features/snippets"> Snippets </a> <a href="/features/themes"> Custom Themes </a> </div> </div> <div class="flex lg:justify-center"> <div class="flex flex-col text-sm leading-6 text-silver-700 space-y-1"> <h2 class="mb-4 text-lg font-bold leading-6 md:text-xl font-display text-white">Guides</h2> <a href="/getting-started"> Getting Started </a> <a href="/tinkerwell-for-laravel"> Tinkerwell for Laravel </a> <a href="/tinkerwell-for-symfony"> Tinkerwell for Symfony </a> <a href="/tinkerwell-for-magento"> Tinkerwell for Magento </a> <a href="/tinkerwell-for-wordpress"> Tinkerwell for WordPress </a> <a href="/whats-new-in-tinkerwell-4"> What's new in Tinkerwell 4 </a> </div> </div> <div class="flex lg:justify-center"> <div class="flex flex-col text-sm leading-6 text-silver-700 space-y-1"> <h2 class="mb-4 text-lg font-bold leading-6 md:text-xl font-display text-white">Links</h2> <a href="https://beyondco.de/licenses/tinkerwell" target="_blank"> Download </a> <a href="/renew" class=""> Renew existing license </a> <span> <a href="/docs"> Documentation </a> (<a href="/docs/3" class="underline">v3</a>, <a href="/docs/2" class="underline">v2</a>) </span> <a href="/changelog"> Changelog </a> <a href="https://beyondco.de/referral-program"> Referral Program </a> <a href="/affiliate"> Affiliates </a> </div> </div> <div class="flex lg:justify-center"> <div class="flex flex-col text-sm leading-6 text-silver-700 space-y-1"> <h2 class="mb-4 text-lg font-bold leading-6 md:text-xl font-display text-white">Misc</h2> <a href="https://tinkerwell.app/eula"> EULA </a> <a href="/open-source"> Open Source </a> <a href="/education"> Education </a> <a href="/cdn-cgi/l/email-protection#f0838580809f8284b09295899f9e94939fde9495"> Support </a> </div> </div> </div> <div class="w-full mb-20 text-center border-t border-solid gradientBorderRadial pt-16 mt-16 text-silver-700"> <a class="pt-8 text-base text-silver-700 xl:text-center" href="https://beyondco.de">© 2025 Beyond Code GmbH</a> - <a href="https://tinkerwell.app/imprint"> Imprint / Legal </a> </div> </footer> </div> </div> <div id="confirmationModal" x-data="{ show: false, formErrors: false, feedback: '', saveFeedbackAndGoToDownload: function() { if (this.feedback.length > 0) { fetch('/feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ feedback: this.feedback, }) }).then(response => { if (response.ok) { window.location.href = 'https://beyondco.de/login'; } else { this.formErrors = true; } }); this.formErrors = false; } else { this.formErrors = true; } } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-3xl mb-6 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:w-full sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-12 text-black md:px-16"> <svg @click="show = false" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="text-2xl leading-8 font-display"> Thank you for buying Tinkerwell ❤️! </div> <div class="px-8"> <div> <div class="pt-4"> We are happy to welcome you as a customer and while you wait for your license key to arrive in your email inbox (it usually takes 1-2 minutes), please do us a small favor and tell us why you bought Tinkerwell. </div> <div class="pt-4 flex flex-col items-center"> <textarea x-model="feedback" rows="3" placeholder="A friend recommended it to me because ..." class="w-full p-2 focus:outline-none border rounded-lg text-sm" x-bind:class="formErrors ? 'border-red-500' : ''"></textarea> <span class="pt-2 text-xs text-red-500" x-show="formErrors">⬆️This field is required ⬆️</span> </div> <div class="pt-4"> You can download Tinkerwell via the Beyond Code Dashboard by creating an account or by linking your license key with an existing account. </div> <div class="pt-4"> <a href="#" @click="saveFeedbackAndGoToDownload" class="flex items-center justify-center w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span>Download Tinkerwell on the Beyond Code Dashboard</span> </a> </div> </div> </div> </div> </div> </div> <div id="extensionModal" x-data="{ show: false, licenseValid: false, licenseKey: '', license: {}, licenseError: false, validating: false, paymentLink: '', discountPercentage: 0, displayPrice: 199, price: 199.99, upgradeLicense: function() { Paddle.Checkout.open({ product: 595023, override: this.paymentLink || '', passthrough: this.licenseKey, customData: { tolt_referral: window.tolt_referral, }, successCallback: function(data) { document.getElementById('extensionModal').__x.$data.show = false; try { window.fathom.trackGoal('M3MFBTJT', data.checkout.prices.vendor.total * 100); } catch(e) {} alert('Thank you for upgrading your license! Our webhook minions are working at the moment and your license should be upgraded in a few minutes.'); } }); }, extendLicense: function() { Paddle.Checkout.open({ product: 637105, passthrough: this.licenseKey, coupon: this.license.extension_coupon, customData: { tolt_referral: window.tolt_referral, }, successCallback: function(data) { document.getElementById('extensionModal').__x.$data.show = false; try { window.fathom.trackGoal('M3MFBTJT', data.checkout.prices.vendor.total * 100); } catch(e) {} alert('Thank you for renewing your license! Our webhook minions are working at the moment and your license date should be updated in a few minutes.'); } }); }, validateLicenseKey: function() { this.licenseKey = this.licenseKey.trim(); let endpoint = 'https://api.beyondco.de/api/license/can-renew?license='; fetch(endpoint+this.licenseKey, { mode: 'cors' }) .then(response => response.json()) .then(data => { this.license = data.data; this.licenseError = false; this.licenseValid = true; }) .catch(err => { this.licenseError = true; }); fetch('/api/license-upgrade?license='+this.licenseKey+'&country='+window.countryCode, { mode: 'cors' }) .then(response => response.json()) .then(data => { this.paymentLink = data.payment_link; this.discountPercentage = data.discount_percentage; this.displayPrice = data.display_price; this.price = data.price; this.validating = false; }) .catch(err => { this.validating = false; }); } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } });" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-xl mb-6 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:w-full sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-12 text-black md:px-16"> <svg @click="show = false; licenseValid = false" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="text-2xl leading-8 font-display"> Renew your Tinkerwell license </div> <div class="px-8 mt-6 w-full flex items-center justify-center"> <div class="flex w-full items-center justify-center"> <div x-show="validating === true" class="inline-flex items-center justify-center w-full h-full opacity-75"> Validating ... </div> <div x-show="validating === false"> <div x-show="! licenseValid" class="w-full"> <input type="text" placeholder="Your Tinkerwell License Key" class="text-center w-full p-2 focus:outline-none border rounded-lg" x-model="licenseKey"> <div x-show="licenseError === true" class="p-4 font-bold text-center"> The given license key is invalid. </div> <a href="#" x-on:click.prevent="validateLicenseKey" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> Validate Key </span> </a> </div> <div class="py-4" x-show="licenseValid"> <div x-show="moment(license.valid_until).isAfter()"> <div class="text-center text-sm">The license key <br><span x-text="license.key" class="font-mono font-bold"></span><br> receives updates until <span x-text="moment(license.valid_until).format('MMMM, Do YYYY')"></span>. </div> <a x-on:click.prevent="extendLicense" href="#" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> Add one year of updates (<span class="paddle-net" data-product="637105"></span>) </span> </a> <p class="mt-4 mb-4 w-full text-center text-sm">or upgrade to lifetime with a <span class="font-bold"><span x-text="discountPercentage"></span>%</span> discount and get all updates that we'll ever make.</p> <a x-on:click.prevent="upgradeLicense" href="#" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group px-4"> <span class="inline-flex items-center justify-center w-full h-full"> Upgrade to Lifetime License (<span x-text="displayPrice"></span>) </span> </a> </div> <div x-show="! moment(license.valid_until).isAfter()" class="text-center"> <div class="inline-block mb-4 text-sm">The license key <br><span x-text="license.key" class="font-mono font-bold"></span><br> expired on <span x-text="moment(license.valid_until).format('MMMM, Do YYYY')"></span> and no longer receives updates!<br><br> Upgrade your license to stay on the latest version.</div><br> <a href="#" x-on:click.prevent="extendLicense" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> Renew your license for one year (<span class="paddle-net" data-product="637105"></span>) </span> </a> <p class="mt-4 mb-4 w-full text-center text-sm">or upgrade to lifetime with a <span class="font-bold"><span x-text="discountPercentage"></span>%</span> discount and get all updates that we'll ever make.</p> <a x-on:click.prevent="upgradeLicense" href="#" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group px-4"> <span class="inline-flex items-center justify-center w-full h-full"> Upgrade to Lifetime License (<span x-text="displayPrice"></span>) </span> </a> </div> </div> </div> </div> </div> </div> </div> </div> <div id="upgradeModal" x-data="{ show: false, licenseValid: false, paymentLink: '', discountPercentage: 0, displayPrice: 199, price: 199.99, validating: false, licenseKey: '', license: {}, licenseError: false, errorMessage: '', extendLicense: function() { window.location.href = '/renew?license='+this.licenseKey+'&lifetime=1'; }, validateLicenseKey: function() { this.licenseKey = this.licenseKey.trim(); this.validating = true; fetch('/api/license-upgrade?lifetime=true&license='+this.licenseKey+'&country='+window.countryCode, { mode: 'cors' }) .then(response => response.json()) .then(data => { if(data.error) { this.validating = false; this.licenseError = true; this.errorMessage = data.error; this.licenseValid = false; } else { this.validating = false; this.license = data.license; this.paymentLink = data.payment_link; this.discountPercentage = data.discount_percentage; this.displayPrice = data.display_price; this.price = data.price; this.licenseError = false; this.licenseValid = true; } }) .catch(err => { this.licenseError = true; this.validating = false; }); } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } });" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-xl mb-6 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:w-full sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-12 text-black md:px-16"> <svg @click="show = false; licenseValid = false" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="text-2xl leading-8 font-display"> Upgrade to Lifetime </div> <div class="px-8 mt-6 w-full flex items-center justify-center"> <div class="flex w-full items-center justify-center"> <div x-show="! licenseValid" class="w-full"> <input type="text" placeholder="Your Tinkerwell License Key" class="text-center w-full p-2 focus:outline-none border rounded-lg" x-model="licenseKey"> <div x-show="licenseError === true" class="p-4 font-bold text-center"> <span x-show="errorMessage !== ''" x-text="errorMessage"></span> <span x-show="errorMessage === ''"> The given license key is invalid. </span> </div> <a href="#" x-on:click.prevent="validateLicenseKey" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span x-show="validating === false" class="inline-flex items-center justify-center w-full h-full"> Validate Key </span> <span x-show="validating === true" class="inline-flex items-center justify-center w-full h-full opacity-75"> Validating ... </span> </a> </div> <div class="py-4" x-show="licenseValid"> <div x-show="moment(license.valid_until).isAfter()"> <p x-show="discountPercentage > 0" class="text-center"> The license <span x-text="license.key"></span> grants you a <span class="font-bold" x-text="discountPercentage + '%'"></span> discount!<br> </p> <a x-on:click.prevent="extendLicense" href="#" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group px-4"> <span class="inline-flex items-center justify-center w-full h-full"> Upgrade to Lifetime License (<span x-text="displayPrice"></span>) </span> </a> </div> <div x-show="! moment(license.valid_until).isAfter()" class="text-center"> <div class="inline-block mb-4 text-sm">The license <span x-text="license.key"></span> qualifies for an update to a lifetime license!</div> <a href="#" x-on:click.prevent="extendLicense" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group px-4"> <span class="inline-flex items-center justify-center w-full h-full"> Upgrade to Lifetime License (<span x-text="displayPrice"></span>) </span> </a> </div> <p class="text-center text-sm pt-2 text-gray-700">Local taxes may apply.</p> </div> </div> </div> </div> </div> </div> <div id="trialModal" x-data="{ show: false, subscribed: false, error: null, email: '', subscribeEmail: function() { fetch('/newsletter', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, body: JSON.stringify({ email: this.email, }), }) .then(response => response.json()) .then(data => { if (data.errors) { this.error = data.message; } else { this.error = null; this.subscribed = true; } }); } }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); } else { document.body.classList.remove('overflow-y-hidden'); } });" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" style="display: none;"> <div x-show="show" class="fixed inset-0 transition-all transform" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 bg-gray-900 opacity-75"></div> </div> <div x-show="show" class="max-w-xl mb-6 overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:w-full sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> <div class="relative flex flex-col items-center py-12 text-black md:px-16"> <svg @click="show = false;" class="absolute cursor-pointer top-4 right-4" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29295 7.12133C4.68348 6.73081 5.31664 6.73081 5.70717 7.12133L7.58585 9.00002C7.97637 9.39054 8.60954 9.39054 9.00006 9.00002V9.00002C9.39059 8.60949 9.39059 7.97633 9.00006 7.5858L7.12138 5.70712C6.73086 5.3166 6.73086 4.68343 7.12138 4.29291L9.00006 2.41423C9.39059 2.0237 9.39059 1.39054 9.00006 1.00002V1.00002C8.60954 0.609491 7.97637 0.60949 7.58585 1.00001L5.70717 2.8787C5.31664 3.26922 4.68348 3.26922 4.29295 2.87869L2.41427 1.00001C2.02375 0.60949 1.39059 0.609491 1.00006 1.00002V1.00002C0.609537 1.39054 0.609536 2.0237 1.00006 2.41423L2.87874 4.29291C3.26927 4.68343 3.26927 5.3166 2.87874 5.70712L1.00006 7.5858C0.609536 7.97633 0.609537 8.60949 1.00006 9.00002V9.00002C1.39059 9.39054 2.02375 9.39054 2.41427 9.00002L4.29295 7.12133Z" fill="#454B51" /> </svg> <div class="text-2xl leading-8 font-display"> Download Tinkerwell </div> <div class="px-8 mt-6 w-full flex items-center justify-center"> <div class="flex w-full items-center justify-center"> <div class="w-full"> <p class="text-center">Choose your operating system:</p> <a href="/download/latest/mac" onclick="window.fathom.trackGoal('4LPUUACB', 0);" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> macOS (Intel) </span> </a> <a href="/download/latest/mac-arm64" onclick="window.fathom.trackGoal('0SYELT6S', 0);" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> macOS (Apple Silicon) </span> </a> <a href="/download/latest/win" onclick="window.fathom.trackGoal('QHELVMFG', 0);" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> Windows </span> </a> <a href="/download/latest/linux" onclick="window.fathom.trackGoal('WAY1VDMR', 0);" class="items-center justify-center block w-full h-10 p-0 mt-4 font-bold text-white rounded-full bg-purple hover:bg-purple-gradient focus:bg-purple-darker focus:text-opacity-70 focus:outline-none group"> <span class="inline-flex items-center justify-center w-full h-full"> Linux </span> </a> <p class="mt-4 text-center text-xs"> <a href="https://beyondco.de/login" target="_blank" class="underline">Log in</a> and download previous versions here. </p> <p class="border-t mt-4 py-4 text-center" x-show="subscribed === false"> Subscribe to our newsletter to stay in the loop of updates and releases. </p> <div x-show="error !== null" class="p-4 font-bold text-center" x-text="error"></div> <div x-show="subscribed === true" class="p-4 font-bold text-center"> Thank you for subscribing. </div> <div x-show="subscribed === false"> <input x-model="email" type="email" placeholder="E-Mail" class="w-full p-2 focus:outline-none border rounded-lg"> <a href="#" x-on:click.prevent="subscribeEmail" class="block mt-4 active:bg-opacity-10 active:border-opacity-20 bg-opacity-20 bg-silver-900 border border-opacity-20 border-white duration-300 ease-in-out focus:outline-none font-medium hover:bg-gray-800 hover:border-opacity-50 hover:text-white leading-24 py-3 rounded-lg text-baseSmall text-black transition"> <span class="inline-flex items-center justify-center w-full h-full"> Subscribe </span> </a> </div> </div> </div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.paddle.com/paddle/paddle.js"></script> <script type="text/javascript"> Paddle.Setup({ vendor: 103161, eventCallback: function(data) { try { if (data.event === 'Checkout.Loaded') { window.fathom.trackGoal('RPJCWQWD', 0); } else if (data.event === 'Checkout.Customer.Details') { window.fathom.trackGoal('ZQKVX3NQ', 0); } else if (data.event === 'Checkout.Payment.Selection') { window.fathom.trackGoal('ITU73YBR', 0); } else if (data.event === 'Checkout.Login') { window.fathom.trackGoal('8VCNHEPR', 0); } else if (data.event === 'Checkout.Error') { window.fathom.trackGoal('JU73AEQK', 0); } else if (data.event === 'Checkout.Failed') { window.fathom.trackGoal('XOGNKKWQ', 0); } else if (data.event === 'Checkout.Location.Submit') { window.fathom.trackGoal('LXCM54S1', 0); } else if (data.event === 'Checkout.Close') { window.fathom.trackGoal('DILATCSN', 0); } else if (data.event === 'Checkout.Vat.Add') { window.fathom.trackGoal('YOKB2C73', 0); } else if (data.event === 'Checkout.Vat.Cancel') { window.fathom.trackGoal('OHDYJT9B', 0); } else if (data.event === 'Checkout.Vat.Applied') { window.fathom.trackGoal('OUSBCMXZ', 0); } else if (data.event === 'Checkout.Complete') { window.fathom.trackGoal('L7GCIPH7', data.eventData.checkout.prices.vendor.total * 100); let dataLayerInfo = { event: "purchase", ecommerce: { transaction_id: data.eventData.checkout.id, affiliation: null, value: data.eventData.checkout.prices.customer.total, tax: data.eventData.checkout.prices.customer.total_tax, shipping: null, currency: data.eventData.checkout.prices.customer.currency, coupon: data.eventData.checkout.coupon.coupon_code, items: data.eventData.checkout.prices.customer.items, }, }; dataLayer.push(dataLayerInfo); } } catch(e) {} } }); </script> <script src="/js/app.js"></script> <script> window.countryCode = 'US'; Paddle.Product.Prices(581356, function(prices) { window.countryCode = prices.country; fetch('/prices?paddle_id=581356&country='+prices.country) .then(function (response) { return response.json(); }) .then(function (json) { dispatchEvent(new CustomEvent('prices-updated', { detail: {priceOverrides: json} })) }) }); function openCheckout(overrideLink, product) { try { window.fathom.trackGoal('PEARKOFJ', 0); } catch(e) {} if (typeof product !== 'undefined') { var productId = product; } else { var productId = '581356'; } Paddle.Checkout.open({ product: productId, override: overrideLink || '', customData: { tolt_referral: window.tolt_referral, }, successCallback: function(data) { document.getElementById('confirmationModal').__x.$data.show = true; try { window.fathom.trackGoal('M3MFBTJT', data.checkout.prices.vendor.total * 100); } catch(e) {} } }); } if (window.ApplePaySession) { if (ApplePaySession.canMakePayments()) { document.getElementById('apple-pay-text').classList.remove('hidden'); } } </script> <script src="/js/TweenMax.js"></script> <script src="/js/MorphSVG.js"></script> <script src="/js/hero.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script> <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script> <script type="text/javascript">window.Beacon('init', 'b58ea27c-7139-4ecf-8782-7a504f20fbda')</script> </body> </html>

CINXE.COM

The code runner for PHP 💫 - Tinkerwell