HTML till JSX-omvandlare

Annons
Alla verktyg Gratis

Klistra in HTML och få ren React-JSX — class blir className, attribut blir camelCase, style-strängar blir objekt och taggar stängs själva. Körs helt i din webbläsare. Gratis.

Allt körs i din webbläsare — din markup lämnar aldrig din enhet.

snippet.html 
1
Component.jsx 

							

							

								{ }
								Din JSX visas här
							

						

					

				

			

		

	


        
                    

		


					
Om HTML till JSX-omvandlare

							
HTML till JSX-konverteraren omvandlar vanlig HTML-markup till React-klar JSX i realtid. Den skriver om class till className och for till htmlFor, camelCasear kebab-case och SVG-attribut, konverterar inline style-strängar till JSX style-objekt, och självstänger tomma element som img och br — precis de ändringar du annars skulle göra för hand.

							
Klistra in ett utdrag, en hel sidsektion, eller markup exporterad från ett designverktyg, och JSX-fältet uppdateras medan du skriver med syntaxmarkering. Ett valfritt omslag gör resultatet till en namngiven funktionskomponent, så resultatet passar direkt in i ett React-projekt utan ytterligare redigering.

							
Konverteraren är ett helt klientsidesbaserat HTML till JSX-verktyg: din markup omvandlas av JavaScript i din webbläsare och lämnar aldrig din enhet, vilket gör det säkert att använda med proprietära mallar och interna sidor.

					
					
Så använder du HTML till JSX-omvandlare

			
    
									
  1. Klistra in din HTML i vänster fält, eller klicka på Exempel för att ladda ett exempel.
    2. 
									
  2. Titta på hur JSX-fältet uppdateras direkt medan du skriver eller redigerar.
    3. 
									
  3. Slå på Omslut i en komponent och ange ett komponentnamn om du vill ha en färdig funktionskomponent.
    4. 
									
  4. Klicka på Kopiera för att hämta JSX:en, eller Ladda ner för att spara den som Component.jsx.
    5. 
									
  5. Använd Rensa för att återställa båda fälten och konvertera ett annat utdrag.
    6. 
							

		
					
Vanliga frågor

			

									

						

							
						

						

							
Den byter namn på class till className och for till htmlFor, camelCasear bindestreckade attribut (inklusive SVG-attribut), konverterar inline style-strängar till JSX style-objekt, och självstänger tomma taggar som img, br och input, så att utdatan är giltig JSX.

						

					

									

						

							
						

						

							
Ja. Aktivera Omslut i en komponent och välj ett komponentnamn, så genererar verktyget en komplett funktionskomponent runt den konverterade markupen, redo att klistras in i ditt projekt eller laddas ner som en .jsx-fil.

						

					

									

						

							
						

						

							
Ja. Ett style-attribut som style="margin-top: 10px" blir ett JSX-objekt som style={{marginTop: '10px'}}, med varje CSS-egenskap camelCasead, inklusive leverantörsprefixerade egenskaper.

						

					

									

						

							
						

						

							
Nej. Konverteringen körs helt i din webbläsare, så din markup lämnar aldrig din enhet. Du kan säkert konvertera interna mallar och opublicerade sidor.

						

					

									

						

							
						

						

							
Ja, den är helt gratis. Det finns inget kontokrav, ingen kreditkostnad och ingen gräns för hur många utdrag du konverterar.

						

					

							


						
			


	



	
	

		

		

			Dela
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Relaterade verktyg


					

									

						
							
							
								
									JSON till kod-generator
									
								
								Förvandla valfritt JSON-exempel till TypeScript, Go, Python, Kotlin eller ett JSON Schema — typinferens körs helt i webbläsaren. Gratis och privat.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Kodformaterare
									
								
								Formatera HTML, CSS och JavaScript — återindragera och lägg till radbrytningar för att göra rörig eller minifierad kod läsbar.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									cURL till kod-omvandlare
									
								
								Klistra in ett curl-kommando och få körklar kod för fetch, Python requests, PHP, Node axios eller Go — tolkas helt i webbläsaren. Gratis.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Kod till bild-konverterare
									
								
								Förvandla ett kodavsnitt till en snygg delningsbar bild — teman, bakgrunder, fönsterkrom och mer.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									Globala datum- och tidsformat
									
								
								Se hur datum och tider skrivs runt om i världen — välj länder eller språk och jämför deras format omedelbart.
								
																			Gratis
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Konvertera JSON till YAML och tillbaka, med validering.
								
																			Gratis
																	
							
						
					

							

			







		

			

				

					
					

						
Behöver du hjälp?

						
Hittade du ett problem med det här verktyget? Berätta för oss.

					

				

				
					Rapportera ett problem
				
			

		

	





        

            

                

                    
                

                

                    

                        
Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.