[{"data":1,"prerenderedAt":375},["ShallowReactive",2],{"navigation_docs":3,"-react-installation":104,"-react-installation-surround":370},[4,46,67,91],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":45},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,15,20,25,30,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fguide\u002Fintroduction","1.guide\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"How it works","\u002Fguide\u002Fhow-it-works","1.guide\u002F2.how-it-works","i-lucide-workflow",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fguide\u002Fdata-modes","1.guide\u002F3.data-modes","i-lucide-git-fork",{"title":26,"path":27,"stem":28,"icon":29},"Options","\u002Fguide\u002Foptions","1.guide\u002F4.options","i-lucide-settings-2",{"title":31,"path":32,"stem":33,"icon":34},"Gradients","\u002Fguide\u002Fgradients","1.guide\u002F5.gradients","i-lucide-palette",{"title":36,"path":37,"stem":38,"icon":39},"WebSocket protocol","\u002Fguide\u002Fwebsocket-protocol","1.guide\u002F6.websocket-protocol","i-lucide-radio",{"title":41,"path":42,"stem":43,"icon":44},"AI tools","\u002Fguide\u002Fai-tools","1.guide\u002F7.ai-tools","i-lucide-bot",false,{"title":47,"icon":48,"path":49,"stem":50,"children":51,"page":45},"Core","i-lucide-box","\u002Fcore","2.core",[52,57,62],{"title":53,"path":54,"stem":55,"icon":56},"Installation","\u002Fcore\u002Finstallation","2.core\u002F1.installation","i-lucide-download",{"title":58,"path":59,"stem":60,"icon":61},"API reference","\u002Fcore\u002Fapi","2.core\u002F2.api","i-lucide-code",{"title":63,"path":64,"stem":65,"icon":66},"Audio engines","\u002Fcore\u002Faudio-engines","2.core\u002F3.audio-engines","i-lucide-audio-lines",{"title":68,"icon":69,"path":70,"stem":71,"children":72,"page":45},"Vue","i-simple-icons-vuedotjs","\u002Fvue","3.vue",[73,76,81,86],{"title":53,"path":74,"stem":75,"icon":56},"\u002Fvue\u002Finstallation","3.vue\u002F1.installation",{"title":77,"path":78,"stem":79,"icon":80},"Props, events & methods","\u002Fvue\u002Fprops","3.vue\u002F2.props","i-lucide-sliders-horizontal",{"title":82,"path":83,"stem":84,"icon":85},"Composables","\u002Fvue\u002Fcomposables","3.vue\u002F3.composables","i-lucide-plug",{"title":87,"path":88,"stem":89,"icon":90},"Nuxt","\u002Fvue\u002Fnuxt","3.vue\u002F4.nuxt","i-simple-icons-nuxtdotjs",{"title":92,"icon":93,"path":94,"stem":95,"children":96,"page":45},"React","i-simple-icons-react","\u002Freact","4.react",[97,100],{"title":53,"path":98,"stem":99,"icon":56},"\u002Freact\u002Finstallation","4.react\u002F1.installation",{"title":101,"path":102,"stem":103,"icon":80},"Props, callbacks & ref","\u002Freact\u002Fprops","4.react\u002F2.props",{"id":105,"title":53,"body":106,"description":363,"extension":364,"links":365,"meta":366,"navigation":367,"path":98,"seo":368,"stem":99,"__hash__":369},"docs\u002F4.react\u002F1.installation.md",{"type":107,"value":108,"toc":358},"minimark",[109,121,126,184,187,190,213,217,225,297,304,308,312,319,337,354],[110,111,112,113,120],"p",{},"Prefer to poke at it first? The ",[114,115,119],"a",{"href":116,"rel":117},"https:\u002F\u002Fdemo.fftvisualizer.com\u002Freact\u002F",[118],"nofollow","live playground","\nruns this exact package with every option exposed.",[122,123,125],"h2",{"id":124},"install","Install",[127,128,129,155,170],"code-group",{},[130,131,137],"pre",{"className":132,"code":133,"filename":134,"language":135,"meta":136,"style":136},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @fft-visualizer\u002Freact\n","pnpm","bash","",[138,139,140],"code",{"__ignoreMap":136},[141,142,145,148,152],"span",{"class":143,"line":144},"line",1,[141,146,134],{"class":147},"sBMFI",[141,149,151],{"class":150},"sfazB"," add",[141,153,154],{"class":150}," @fft-visualizer\u002Freact\n",[130,156,159],{"className":132,"code":157,"filename":158,"language":135,"meta":136,"style":136},"npm install @fft-visualizer\u002Freact\n","npm",[138,160,161],{"__ignoreMap":136},[141,162,163,165,168],{"class":143,"line":144},[141,164,158],{"class":147},[141,166,167],{"class":150}," install",[141,169,154],{"class":150},[130,171,174],{"className":132,"code":172,"filename":173,"language":135,"meta":136,"style":136},"yarn add @fft-visualizer\u002Freact\n","yarn",[138,175,176],{"__ignoreMap":136},[141,177,178,180,182],{"class":143,"line":144},[141,179,173],{"class":147},[141,181,151],{"class":150},[141,183,154],{"class":150},[110,185,186],{},"React 18 and 19 are both supported, and React is the only peer dependency.",[110,188,189],{},"Import the stylesheet once, anywhere in your app — it sizes the canvas and styles the stats\noverlay:",[130,191,195],{"className":192,"code":193,"language":194,"meta":136,"style":136},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@fft-visualizer\u002Freact\u002Fstyle.css'\n","ts",[138,196,197],{"__ignoreMap":136},[141,198,199,203,207,210],{"class":143,"line":144},[141,200,202],{"class":201},"s7zQu","import",[141,204,206],{"class":205},"sMK4o"," '",[141,208,209],{"class":150},"@fft-visualizer\u002Freact\u002Fstyle.css",[141,211,212],{"class":205},"'\n",[122,214,216],{"id":215},"quick-start","Quick start",[110,218,219,220,224],{},"The fastest way to see something is ",[221,222,223],"strong",{},"local mode"," — capture the microphone and visualize\nit entirely in the browser, no backend required:",[130,226,230],{"className":227,"code":228,"language":229,"meta":136,"style":136},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { FFTVisualizer } from '@fft-visualizer\u002Freact'\nimport '@fft-visualizer\u002Freact\u002Fstyle.css'\n\nexport function Viz() {\n  \u002F\u002F The component fills its container — give it a height\n  return (\n    \u003Cdiv style={{ width: '100%', height: 240 }}>\n      \u003CFFTVisualizer mode=\"local\" bands={40} gradient=\"aurora\" \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n","tsx",[138,231,232,237,242,249,255,261,267,273,279,285,291],{"__ignoreMap":136},[141,233,234],{"class":143,"line":144},[141,235,236],{},"import { FFTVisualizer } from '@fft-visualizer\u002Freact'\n",[141,238,240],{"class":143,"line":239},2,[141,241,193],{},[141,243,245],{"class":143,"line":244},3,[141,246,248],{"emptyLinePlaceholder":247},true,"\n",[141,250,252],{"class":143,"line":251},4,[141,253,254],{},"export function Viz() {\n",[141,256,258],{"class":143,"line":257},5,[141,259,260],{},"  \u002F\u002F The component fills its container — give it a height\n",[141,262,264],{"class":143,"line":263},6,[141,265,266],{},"  return (\n",[141,268,270],{"class":143,"line":269},7,[141,271,272],{},"    \u003Cdiv style={{ width: '100%', height: 240 }}>\n",[141,274,276],{"class":143,"line":275},8,[141,277,278],{},"      \u003CFFTVisualizer mode=\"local\" bands={40} gradient=\"aurora\" \u002F>\n",[141,280,282],{"class":143,"line":281},9,[141,283,284],{},"    \u003C\u002Fdiv>\n",[141,286,288],{"class":143,"line":287},10,[141,289,290],{},"  )\n",[141,292,294],{"class":143,"line":293},11,[141,295,296],{},"}\n",[110,298,299,300,303],{},"The browser prompts for microphone permission on mount. To capture tab or system audio\ninstead of the mic, set ",[138,301,302],{},"audioSource=\"display\"",".",[305,306,307],"note",{},"The component fills its container, so the wrapper needs a defined height.",[122,309,311],{"id":310},"nextjs-react-server-components","Next.js & React Server Components",[110,313,314,315,318],{},"The component renders on the server (every browser API is touched inside ",[138,316,317],{},"useEffect","), but\nit needs the browser to do anything — so it belongs in a client component:",[130,320,322],{"className":227,"code":321,"language":229,"meta":136,"style":136},"'use client'\n\nimport { FFTVisualizer } from '@fft-visualizer\u002Freact'\n",[138,323,324,329,333],{"__ignoreMap":136},[141,325,326],{"class":143,"line":144},[141,327,328],{},"'use client'\n",[141,330,331],{"class":143,"line":239},[141,332,248],{"emptyLinePlaceholder":247},[141,334,335],{"class":143,"line":244},[141,336,236],{},[305,338,339,342,343,346,347,350,351,353],{},[138,340,341],{},"mode=\"local\""," is one of three ",[114,344,345],{"href":22},"data modes",". Every prop maps to a shared\n",[114,348,349],{"href":27},"option","; see ",[114,352,101],{"href":102}," for the React-specific API.",[355,356,357],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}",{"title":136,"searchDepth":239,"depth":239,"links":359},[360,361,362],{"id":124,"depth":239,"text":125},{"id":215,"depth":239,"text":216},{"id":310,"depth":239,"text":311},"Install the package and render your first spectrum in under a minute.","md",null,{},{"icon":56},{"title":53,"description":363},"F2GmIFYGSBlmLiyExzgCMCN40YXZXu9LX7NzgCAzqqI",[371,373],{"title":87,"path":88,"stem":89,"description":372,"icon":90,"children":-1},"Use the Vue component in a Nuxt app — client-only rendering, the stylesheet, and avoiding layout shift.",{"title":101,"path":102,"stem":103,"description":374,"icon":80,"children":-1},"The React component API — props, callback props, and the imperative handle.",1785144671314]