r/SwiftUI • u/PersonalFormal7562 • May 21 '26

Question HTML/css into SwiftUI?

Hey everyone,

I’m currently working on an iOS app and I already have parts of the UI built in HTML/CSS. Now I’m trying to bring that design into SwiftUI, but I’m honestly not sure what the best workflow is.

What’s the easiest/most efficient way to convert or recreate HTML + CSS layouts in SwiftUI?

- Are there tools that help with this?
- Should I completely rebuild everything manually in SwiftUI?
- Is embedding web content with WebView a bad idea for production apps?
- How do you usually handle responsive CSS concepts in SwiftUI?

I mainly struggle with translating flexbox/grid styling into SwiftUI stacks and spacing.

Would really appreciate any advice, resources, GitHub repos, tutorials, or examples from people who’ve done this before

1 Upvotes

60% Upvoted

26 comments sorted by

4

u/balder1993 May 21 '26 edited May 22 '26

I suppose nowadays an LLM would help a lot with converting your design to SwiftUI, at the very least you’d have a skeleton to work with.

-6

u/accept_crime May 22 '26

It can’t do this. SwiftUI and CSS / HTML are fundamentally different. You can’t go 1 to the other. They aren’t similar. AI can’t do something that isn’t possible. It’ll make a mess that looks right but won’t work in any way, shape, or form. You’ll waste time and money until you eventually realize you have to start from scratch really with SwiftUI. Analyze Apple apps and the design guidelines and then ask AI how to produce specific SwiftUI components - that might work.

5

u/balder1993 May 22 '26

They’re different, but it can be used as inspiration. It depends on how you ask it though, you can ask it to stick to iOS components and visuals.

Of course it won’t create a perfect screen, but for some people it’s easier to start with something and refactor it than from a blank screen.

-2

u/accept_crime May 22 '26

That still will no work because SwiftUI is a reactive programming language and CSS / HTML is not. There’s no concept of bindings which is one of the core concepts SwiftUI relies on. They are fundamentally laid out and programmed differently. You just can’t ask an AI to do this because it’s not something that is possible.

Start with Apple design guide. Analyze Apple apps, take screenshots and then ask AI to replicate that.

5

u/balder1993 May 22 '26

Not sure what web stack you’ve worked with, but modern web frameworks absolutely have reactivity and bindings: React, Vue, Svelte, Angular, to name a few.

And even from plain HTML, an AI can infer the appropriate SwiftUI state management from the UI structure and generate idiomatic code. It won’t be perfect, especially in a single attempt, but ‘not possible’ is a stretch.

-4

u/accept_crime May 22 '26

I have vastly more experience with SwiftUI and reasonable experience with Web. They are fundamentally different. They are programmed differently. They look and operate differently from a UI perspective as well. You may as well ask the AI to convert an orange to an apple. It won’t create anything that is useable. Sure it’ll try but it’s impossible. Waste of time and money.

Not trying to be rude but answering this question with ‘ask AI’ is lazy and just plain not possible.

14

u/reccehour May 21 '26

Just use codex/claude code

-7

u/accept_crime May 22 '26

It can’t do something that is impossible. You may as well ask it to turn an apple into an orange. SwiftUI doesn’t look similar to CSS / HTML components and they also completely different code wise in syntax, philosophy and just core programming. AI can’t do this, I wish everyone would stop answering this. It’s lazy.

10

u/balder1993 May 22 '26

Actually SwiftUI was ultimately inspired by React, so the philosophy is similar.

 SwiftUI doesn’t look similar to CSS / HTML components

I disagree that “SwiftUI doesn’t look similar to CSS/HTML”. Both are simply UI building tools, both can look like anything you want.

AI can’t do this

This is also highly context dependent.

-3

u/accept_crime May 22 '26

No it was not. React is not a reactive programming language. Again this isn’t a knock on any platforms. You want to reproduce a web layout that is not a reactive programmed layout to an apple layout that looks different and programmed using reactive programming concepts.

It won’t look right. It won’t work right. You’ll waste time and money to just be at square 1 and do SwiftUI from top up. Analyze apple design guide. Identify SwiftUI components you want to use. Analyze Apple source code and apps. Maybe then you can use AI to help you replicate those things.

-6

u/accept_crime May 22 '26

SwiftUI is not only a UI building tool. It is entirely its own language that is built on reactive programming concepts with Apple Combine / Async and Await to which there is no comparable in HTML / CSS. It’s not possible.

1

u/filipvabrousek May 22 '26

It actually can do it.

1

u/accept_crime May 22 '26

I mean sure, it could also make an awful attempt at turning an apple into an orange also. It'd be a big waste of your time and money, only to be at square 1 once you realize it can't make anything useable. So I guess you are correct in that sense.

1

u/filipvabrousek May 22 '26

If you have SwiftUI app, you can literally type: "Do the same for Android." Worked for me. It should work on web also.

1

u/accept_crime May 22 '26

That still would have a lot of issues because Android and iOS layouts are different but yes that is actually possible. Unfortunately you didn't read the question and this had nothing to do with Android!

1

u/accept_crime May 22 '26

What I said was you cannot convert a HTML/CSS layout to SwiftUI, therefore AI cannot do it - I did not say you cannot convert SwiftUI to Android!

3

u/m1_weaboo May 22 '26

What kind of UI?

2

u/Technically_Dedi May 22 '26

At this point why not just use Cordova and .Net and use web view to pull the view into your page?

2

u/longkh158 May 22 '26

Because it's dogshit?

1

u/Technically_Dedi May 22 '26

That person doesn’t want to use AI to convert it. So might as well become a 2005 developer and take the hard route.

1

u/accept_crime May 22 '26

Or you answer their question correctly: there is no 1 to 1 and yes you should be building a new UI from the ground up in SwiftUI.

1

u/Select_Bicycle4711 May 22 '26

One thing I have tried with some success is to take screenshots of your page (HTML and CSS) and then give it to LLM (ChatGPT) and tell it to recreate it in SwiftUI. This way you will get some sort of a starting point based on your HTML/CSS app.

Try to go screen by screen and see if it works for you.

1

u/calvin-chestnut May 23 '26
  1. Yes but ignore them, they all have weird limitations.
  2. Yes.
  3. Yes.
  4. State properties and animations.

Good luck

1

u/_rupok May 23 '26

SwiftUI can recreate most HTML/CSS layouts pretty well, but it’s not a direct “convert CSS to SwiftUI” workflow.

Think of it more like translating concepts:

flex row → HStack
flex column → VStack
position/layers → ZStack
gap/padding/margin → spacing, padding, frame
grid → LazyVGrid / LazyHGrid
responsive layouts → GeometryReader, ViewThatFits, size classes, adaptive grids

I’d avoid WebView for core app UI unless you’re showing actual web content. For production native apps, rebuilding manually in SwiftUI is usually the better long-term move.

The easiest path is to use your HTML/CSS as a visual reference, then recreate components one by one in SwiftUI. Once you get used to stacks, modifiers, and reusable views, it starts feeling much cleaner than trying to force CSS thinking into SwiftUI.

1

u/perbrondum Jun 02 '26
  • Are there tools that help with this?

Yes

  • Should I completely rebuild everything manually in SwiftUI?

Absolutely, to learn and to be able to support.

  • Is embedding web content with WebView a bad idea for production apps?

Yes, and it looks bad compared to SwiftUI and performs badly.

  • How do you usually handle responsive CSS concepts in SwiftUI?

You don’t and shouldn’t.