Turn Your Product Detail Page Into a 3d design studio.

import { KonfigraStudio } from '@konfigra/react';

export default function ProductPage() {
  return (
    <div className="h-screen">
      <KonfigraStudio
        apiKey="pk_live_8923..."
        productId="jer-001"
        onAddToCart={(items) => handleCart(items)}
      />
    </div>
  );
}

<script setup>
  import { KonfigraStudio } from '@konfigra/vue';
</script>

<template>
  <KonfigraStudio
    api-key="pk_live_8923..."
    product-id="jer-001"
    @add-to-cart="handleCart"
  />
</template>

$(document).ready(function() {
  var studio = $('#product-container').konfigra({
    apiKey: 'pk_live_8923...',
    productId: 'jer-001',
    theme: 'dark'
  });

  $('#add-to-cart').on('click', function() {
    const config = studio.exportConfiguration();
    // Submit to cart...
  });
});