Tutorial Hype to Xcode WKWebView

The coding has been done by @MarkHunte

Download Xcode here

  • You can use Xcode to play around or for your own personal use Apps.
    You just need to sign in with your Apple ID and do this for Free.
    Some instructions can be found here on how to do this.
    Test iOS App without Developer Account — #1 Free Certificate

  • If you want to publish your app for others to use
    You will need a Paid for Apple developer account.

Once your have Xcode sorted.

Export you Hype project either as a normal folder or using the 'organized assets' script.

Install Xcode and start a new Project.



Make sure iOS is selected in the top row. Usually 'App' is already selected. Click next.

Fill in your product name.
Organization Identifier: the Bundle ID of your new App.

If you don't have an account yet, do something like in the example.

Click next.

Decide where to save your project.

In the left bottom corner: Choose File...

appScreen 2

Name it WKWebView.

appScreen 4

Repeat and call the next Swift file 'fullScreen'

Now you will see this screen:

Paste this code into the ContentView:

//  ContentView.swift
// ContentView:
//  Created by Mark Hunte on 06/04/2022.

import SwiftUI

extension UIDevice {
    static var isIPad: Bool {
        UIDevice.current.userInterfaceIdiom == .pad
    static var isIPhone: Bool {
        UIDevice.current.userInterfaceIdiom == .phone
struct ContentView: View {

    @State private var showWebView = false
    var body: some View {
        ZStack {

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {


Paste this into the fullScreen:

//  WKWebview.swift
//  FullScreenWKWebView
//  Created by Mark Hunte on 06/04/2022.

import UIKit
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

Paste this code into the WKWebView:

//  WKWebview.swift
//  WKWebview
//  Created by Mark Hunte on 06/04/2022.

import SwiftUI
import WebKit
struct WebView: UIViewRepresentable {
    //-- declare a your html file  name to use later ( do not include the .html )
    let htmlName = "Test"
    func makeUIView(context: Context) -> WKWebView {
        let wconfiguration = WKWebViewConfiguration()
        let wcontroller = WKUserContentController()
        //-- attach controller, config to WKWebview
        wconfiguration.userContentController = wcontroller;
        wconfiguration.allowsInlineMediaPlayback = true
        wconfiguration.allowsAirPlayForMediaPlayback = true
        wconfiguration.mediaTypesRequiringUserActionForPlayback = []
        wconfiguration.setValue(true, forKey: "_allowUniversalAccessFromFileURLs")
        let  webView = WKWebView(frame: .zero, configuration: wconfiguration)
        return webView
    //update van Mark om black screen te omzeilen
    func updateUIView(_ webView: WKWebView, context: Context) {
                    let  theFileName = (htmlName as NSString).lastPathComponent
                    guard let url =  Bundle.main.url(forResource: theFileName, withExtension: "html") else {
                        let errorMessage = "HTML file not found: \(theFileName).html"
                      let htmlString = "<html><body><p style=\"color:red;text-align: center;padding-top:20%\"> SOMETHING WENT WRONG!<br> in updateUIView </p></body></html>"
                            webView.loadHTMLString(htmlString as String, baseURL: nil)
            webView.loadFileURL(url, allowingReadAccessTo: url)
            let request = URLRequest(url: url)
            webView.backgroundColor = UIColor.black //toegevoegd djon
            webView.scrollView.bounces = false
            webView.scrollView.isScrollEnabled = false
            webView.isOpaque = false
            webView.isHidden = false
            webView.scrollView.contentInsetAdjustmentBehavior = .never

This will be the name of your exported Hype project's html file . Just the name, no extension.

   let htmlName = "Test"

If you exported your Hype project as a normal folder export.
Drag your Hype export html file and the .hyperesources folder into the Xcode project.

If you exported your Hype project as a an Organised asset export.
Drag ALL the exported files and folders into the Xcode project.

Screenshot 2024-04-07 at 10.25.49

Make sure that in the dialog that pops up your settings are as below.
Since Xcode 15.3 "create folder references" is not checked standard.

At this stage choose a device to test.

Now say a little prayer and click the 'run' button.

appScreen 9

If everything you did was right, you should now have your Hype file as an app.
Don't forget to test other devices too.

Good luck and have fun!

For a Mac WKWebView have a look here


Hi friend, I followed the tutorial to the letter, everything works fine except that I can't seem to remove the status bar

This is not really related to the tutorial.
For questions like this it would be better to look on the web. But

For those who have the same issue, I already solved it in the code line of "ContentView:". Look for the part:


Immediately below this, add:

.statusBar(hidden: true)

At least, it worked for me this way. I hope it helps someone else.