[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "HTML to Markdown Converter", description: "Convert HTML to Markdown with ease", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { HtmlToMarkdownConverter } from "@/components/html-to-markdown-converter" export default function Home() { return (

HTML → MD

) } [V0_FILE]typescriptreact:file="components/html-to-markdown-converter.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Toaster } from "@/components/ui/toaster" import { ClientConverter } from "@/components/client-converter" import { ArrowRight } from "lucide-react" export function HtmlToMarkdownConverter() { const [html, setHtml] = useState("") const [url, setUrl] = useState("") const [convertTrigger, setConvertTrigger] = useState(0) const handleConvert = async () => { if (url) { try { const response = await fetch(`/api/fetch-html?url=${encodeURIComponent(url)}`) if (!response.ok) { throw new Error("Failed to fetch HTML from URL") } const fetchedHtml = await response.text() setHtml(fetchedHtml) } catch (error) { console.error("Error fetching HTML:", error) // You can add a toast here to show the error to the user } } setConvertTrigger((prev) => prev + 1) } return (

Paste HTML Load from URL

setHtml(e.target.value)}
            className="min-h-[200px]"
          />
        </TabsContent>
        <TabsContent value="url">
          <Input type="url" placeholder="Enter URL" value={url} onChange={(e) => setUrl(e.target.value)} />
        </TabsContent>
      </Tabs>
      <Button onClick={handleConvert} className="w-full">
        Convert to Markdown
        <ArrowRight className="ml-2 h-4 w-4" />
      </Button>
      <ClientConverter key={convertTrigger} html={html} />
      <Toaster />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/fetch-html/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const url = searchParams.get("url")

if (!url) {
    return NextResponse.json({ error: "URL is required" }, { status: 400 })
  }

try {
    const response = await fetch(url)
    const html = await response.text()
    return new NextResponse(html, {
      headers: { "Content-Type": "text/html" },
    })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch HTML" }, { status: 500 })
  }
}

[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="components/client-converter.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { Copy } from "lucide-react"

export function ClientConverter({ html }: { html: string }) {
  const [markdown, setMarkdown] = useState("")
  const [isConverting, setIsConverting] = useState(false)
  const { toast } = useToast()

useEffect(() => {
    const convertHtml = async () => {
      if (!html.trim()) {
        setMarkdown("")
        return
      }

setIsConverting(true)
      try {
        const TurndownService = (await import("turndown")).default
        const turndownService = new TurndownService()

// Use DOMParser instead of JSDOM for browser environment
        const parser = new DOMParser()
        const doc = parser.parseFromString(html, "text/html")

// Remove script tags
        doc.querySelectorAll("script").forEach((el) => el.remove())

// Remove style tags
        doc.querySelectorAll("style").forEach((el) => el.remove())

// Remove comments
        const removeComments = (node: Node) => {
          for (let i = 0; i < node.childNodes.length; i++) {
            const child = node.childNodes[i]
            if (child.nodeType === 8) {
              node.removeChild(child)
              i--
            } else if (child.nodeType === 1) {
              removeComments(child)
            }
          }
        }
        removeComments(doc.body)

// Get the cleaned HTML content
        const cleanedHtml = doc.body.innerHTML

const convertedMarkdown = turndownService.turndown(cleanedHtml)
        setMarkdown(convertedMarkdown)
      } catch (error) {
        console.error("Error converting HTML to Markdown:", error)
        toast({
          title: "Error",
          description: "Failed to convert HTML to Markdown. Please try again.",
          variant: "destructive",
        })
        setMarkdown("Error: Unable to convert HTML to Markdown.")
      } finally {
        setIsConverting(false)
      }
    }

convertHtml()
  }, [html, toast])

const handleCopy = () => {
    navigator.clipboard.writeText(markdown)
    toast({
      title: "Copied!",
      description: "Markdown has been copied to clipboard.",
    })
  }

return (
    <div className="space-y-4">
      <Textarea
        placeholder={isConverting ? "Converting..." : "Converted Markdown will appear here"}
        value={markdown}
        readOnly
        className="min-h-[330px]" // Increased from 200px to 330px (65% taller)
      />
      <Button onClick={handleCopy} className="w-full" disabled={!markdown || isConverting}>
        <Copy className="mr-2 h-4 w-4" />
        Copy Markdown
      </Button>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This